业务需求：搭建后台管理系统导航栏，由于数据太多，因此将数据存放在JSON中。
Tips:根目录就是src,使用@，所以@/views/..即src/views

存放JSON数据

想要在src下的页面中读取到本地JSON数据，需要将JSON数据存放在public文件夹下，我存放的地址为：public/data/nav.json

读取JSON数据

利用ajax读取数据

//src/layout/index.vue文件
let request = new XMLHttpRequest();
request.open("get", "/data/navList.json");
request.send(null);
request.onload = () => {
  if (request.status === 200) {
    let json = JSON.parse(request.responseText);
    console.log(json);
  }
};

复习AJAX

来都来了，复习一下吧

• XMLHttpRequest是AJAX的基础，用于和服务器交换数据
• onreadystatechange是存储函数，当readyState属性变化时就会调用该函数
• readyState存储XMLHttpRequest的状态，从0-4的变化
• 其中：0是请求未初始化，1是服务器连接已建立，2是请求已接收，3是请求处理中，4是请求已完成

//创建XMLHttpRequest对象
let res = new XMLHttpRequest(); 
//向服务器发送请求
// 其中，method表示请求的类型GET或POST，url表示文件所在位置，async表示是异步还是同步
res.open(method,url,async)
// 如果请求是post请求，那么需要向请求添加HTTP头
[res.setRequestHeader("Content-type","application/x-www-form-urlencoded");]
// 将请求发送，仅用于post请求
res.send()
//接下来就是服务器响应了~
res.onreadystatechange()=>{
    // status表示状态
    if (res.readyState==4 && res.status==200){
        let json = JSON.parse(request.responseText);
    	console.log(json);
    }
}