Vue-router
场景：Vue-router是官方提供的路由插件
1.0缓存和动画
- 路由是使用官方组件vue-router,这里只叙述下路由- 的缓存和动画；
- 可以使用exclude(除了)或者include（包括），2.1.0新增 ，来做判断
<transition>
<keep-alive :include"['a','b']">
//或include="a,b" :include="/a|b/",a和b表示组件的name
//因为有些页面，如试试数据统计，要实时刷新，所以就不需要缓存
<router-view/> //路由标签
</keep-alive>
<router-view exclude="c"/>
// c表示组件的name值
</transition>
注：匹配首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称(父组件components选项的键值)。匿名组件不能被匹配
4.用v-if做判断，组件会重新渲染，但是不用一一列举组件 name
1.2全局路由钩子
1.3组件路由钩子
1.4路由模式
直接在路由中设置mode属性：hash或history
1.5Vue.$router
this.$router.push();跳转url,但是这个方法会向history栈添加一个记录，点击后退会返回到上一个页面
this.$router.replace();url跳转不会有记录
this.$router.go(n);类似window.history.go(n)
1.6Vue.$route
表示当前跳转的路由对象，属性有：
name:路由名称,
path：路径,
query：传参接收值,
params：传参接收值,
fullPath：完成解析后的URL，包含查询参数和hash的完整路径,
matched：路由记录副本,
redirectedFrom：如果存在重定向，即为重定向来源的路由的名字
this.$route.params.id:获取通过 params 或/:id传参的参数
this.$route.query.id:获取通过 query 传参的参数
1.7router-view的key
场景：由于vue会复用相同的组件，即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子
<router-view :key="$route.fullPath"></router-view>
这样组件的created和mounted就都会执行
调试template
场景：在vue开发过程中，经常会遇到template模板渲染时JavaScript变量出错的问题，此时也许你会通过console.log来进行调试，这时可以在开发环境挂载一个log函数
//main.js
Vue.prototype.$log = window.console.log;
//组件内部
<div>{{$log(info)}}</div>
async和await
// async与await两个关键字的使用
//
// 1，async用来声明一个异步函数，可以将一个普通函数声明为一个异步函数
// 获取里面的数据的话，需要通过await关键字来获取
// await关键字只能在异步函数中使用，可以直接获取到异步对象中的返回结果
async function test() {
return new Promise((resolve, reject) => {
setTimeout(function () {
var name = '小爱，爱你';
resolve(name);
}, 1000);
})
}
console.log(test());// 输出的就不是一个普通字符串了，输出的是一个promise异步对象，里面存放着该字符串
async function main() {
let data = await test(); //获取异步方法里面的数据
console.log(data);
}
main();
