前后端交互
Promise > fetch > axios > async/await
1、Promise
由于$.ajax()调用后端接口，要按顺序调用接口时需要在这个方法的回调函数里边调用 $.ajax()，会形成回调地狱（回调十八层地狱）。
而 Promise的产生就是为了解决这个问题，Promise是一个异步对象，可以获取到异步操作的消息
var p = new Promise(function(resolve,reject){ //成功调用 resolve('数据') ,然后下面调用then就会把这个 数据 传过去 //失败调用 reject() }); p.then(function(ret){ //从resolve获得正常结果 },function(ret){ //从reject获得错误信息 });
2、fetch: 是基于Promise实现的
//2、fetch fetch('/abc').then(data=>{ return data.text(); // 也可以 return data.json(); }).then(ret=>{ //这里得到最终数据 console.log(ret); })
3、axios: 一个专门用来调用api的库，也是基于Promise实现的，所以语法很相似，用这个就行
vue里的说明文档：https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
中文翻译文档：https://www.kancloud.cn/yunye/axios/234845
通过 .then 获取数据，前面的几个也是通过.then
axios.get('http://localhost:8080/nav/list').then(function(respon){
//data属性是固定写法，通过data可以拿到后台的数据
console.log(respon.data);
});
axios对返回的结果进行封装，返回的是一个对象，里边有一个data属性，里边就是借口返回的数据
设置全局配置：axios.defaults.baseURL = 'https://api.example.com';发送请求不用再打前面那些字符。
请求拦截器，响应拦截器，对request和对response进行处理。
4、async / await 结合 axios 使用，可以使代码更加简洁，
axios里边可以不用编写回调函数
methods:{ queryData: async function(){ var ret = await axios.get('访问地址'); console.log(ret.data);//这就相当于axios里使用回调函数访问data数据 } }
路由
文档： https://router.vuejs.org/zh/installation.html
基本使用 >嵌套路由>动态路由>命名路由>编程式导航
页面的哈希值：URL 中 # 后面的部分 https://abc.com/a/c#aaa #aaa为哈希值
const:
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
后端路由：根据不同的URL地址，寻找相对应的资源
前端路由：负责事件监听，触发事件后，调用不同的事件函数渲染不同的内容
1、router的基本使用
html部分：
<div id="app">
<!-- 第1步 -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 通过传入 `to` 属性指定链接,to会渲染成为 :href-->
<router-link to='/rick'>to rick!!</router-link>
<router-link to='/morty'>to morty!!</router-link>
<!-- 第2步 -->
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
js代码部分：
<script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/vue-router.js"></script> <script type="text/javascript" > //1、定义路由组件 const Rick = {template:'<div>rick的内容</div>'}; const Morty = {template:'<div>morty的内容</div>'}; //2、创建router实例 const router = new VueRouter({ //路由规则 routes:[ {path:'/rick',component: Rick}, {path:'/morty',component: Morty} ] }) //3、将实例挂载上去 var vm = new Vue({ el: '#app', data:{ msg:'插值表达式', }, methods:{ }, //由于属性名和值相同，可以只写一个 router }); </script>
路由重定向：添加一条路由规则， path表示当有这个hash时，重定向到 /rick
{path:'/',redirect: '/rick'},
2、路由嵌套
在父路由的模板里边定义 子路由链接
const Morty = {
template:`
<div>
<div>morty的内容</div>
<h4>子路由</h4>
<!-- 子路由链接 -->
<router-link to='/morty/tab1'>to rick!!</router-link>
<router-link to='/morty/tab2'>to morty!!</router-link>
<!-- 子路由出口 -->
<router-view/>
</div>
`};
创建子路由组件：
//子路由 const Tab1 = {template:'<div>子组件Tab1</div>'}; const Tab2 = {template:'<div>子组件Tab2</div>'};
在父路由的 路由规则里边 添加子路由 规则：
//路由规则 routes:[ {path:'/',redirect: '/rick'}, {path:'/rick',component: Rick}, { path:'/morty', component: Morty, //子路由规则 children:[ {path:'/morty/tab1',component:Tab1}, {path:'/morty/tab2',component:Tab2} ] } ]
3、动态路由匹配： 类似 restful从url路径传一个id过去，
多个路径
对应一个路由规则，使用 :id
组件获取数据 ，$route.params.id
const Rick = {template:'<div>{{$route.params.id}}星球的 rick的内容</div>'};
4、路由传参：
props设置为true则 $route.params 会被传到子组件，（还可以传对象）
{path:'/',redirect: '/rick',props :true},
5、命名路由：
给路由起一个别名
6、编程式导航
声明式导航：在HTML页面中，使用 a 链接进行跳转
编程式导航：在js里边写一个事件，通过点击HTML触发事件，进行导航。
跳转到页面 this.$router.puth('/hash地址');
methods:{ handel:function(){ this.$router.puth('/hash地址'); } },
回退页面 this.$router.go(-1);
。