<keep-alive v-if="aliveFlag"> //因为有些页面,如试试数据统计,要实时刷新,所以就不需要缓存
<router-view/> //路由标签
</keep-alive>
<router-view v-else/>
</transition>
30.2 全局路由钩子
1.router.beforeEach
router.beforeEach((to, from, next) => {
console.log('全局前置守卫：beforeEach -- next需要调用') //一般登录拦截用这个,也叫导航钩子守卫
if (path === '/login') {
next()
return
}
if (token) {
next();
}
})
2.router.beforeResolve (v 2.5.0+)
和beforeEach类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
即在 beforeEach之后调用
3.router.afterEach
全局后置钩子
在所有路由跳转结束的时候调用
这些钩子不会接受 next 函数也不会改变导航本身
30.3 组件路由钩子
1.beforeRouteEnter
在渲染该组件的对应路由被确认前调用，用法和参数与router.beforeEach类似，next需要被主动调用
此时组件实例还未被创建，不能访问this
可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
beforeRouteEnter (to, from, next) {
// 这里还无法访问到组件实例，this === undefined
next( vm => {
// 通过 `vm` 访问组件实例
})
}
2.beforeRouteUpdate (v 2.2+)
在当前路由改变，并且该组件被复用时调用，可以通过this访问实例， next需要被主动调用，不能传回调
3.beforeRouteLeave
导航离开该组件的对应路由时调用，可以访问组件实例 this，next需要被主动调用，不能传回调
30.4 路由模式
设置 mode 属性:hash或 history
30.5 Vue.$router
this.$router.push():跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面
this.$router.replace():不会有记录
this.$router.go(n):n可为正数可为负数。正数返回上一个页面,类似 window.history.go(n)30.6 Vue.$route
表示当前跳转的路由对象,属性有:
name:路由名称
path:路径
query:传参接收值
params:传参接收值
fullPath:完成解析后的 URL，包含查询参数和 hash 的完整路径
matched:路由记录副本
redirectedFrom:如果存在重定向，即为重定向来源的路由的名字
this.$route.params.id:获取通过 params 或/:id传参的参数
this.$route.query.id:获取通过 query 传参的参数
