vue-router全局导航守卫

1.vue-router全局导航守卫

目的：导航守卫是控制用户能够进入哪些路由和不能进入哪些路由的控制器，也就是管理路由的。
利用router对象的beforeEach() 实现导航守卫
在index.js文件中：

//导航守卫
router.beforeEach((to, from, next) =>{
  document.title = to.meta.title  
  next()
})

to:跳转到的路由 from:从哪个路由离开 next:显示函数
next(’/’)或者next({path:’/’}):跳转到一个不同的地址；next(false)中断当前的导航
meta：元数据（描述数据的数据）
可以实现点击路由跳转按钮，标题随着路由的标题改变。

{
    path:'/about',
    component:About,
    meta:{
      title : '关于'
    }
  },

实现效果：

注意:router.beforeEach()是前置钩子函数（hook）
后置钩子函数router.afterEach() 不需要主动调用next()函数

//导航守卫
//前置
router.beforeEach((to, from, next) =>{
  document.title = to.meta.title  
  next()
  console.log('+++++')
})
//后置
router.afterEach((to,from)=>{
  console.log('------')
})

结果先打印++++后打印—

还包括：路由独享守卫，组件内守卫

2.router-view和keep-alive

router-view是一个组件，如果直接被包在keep-alive里，所有路径匹配到的视图组件都会被缓存
keep-alive是vue内置的一个组件，可以被包含的组件保留状态，避免重新渲染。
测试keep-alive 进入Home生命周期处于created，点击跳转其他路由时，Home 的生命周期会结束，如果：

<keep-alive>
      <router-view/>
    </keep-alive>

Home被创建后，再跳转别的路由，此时不会被销毁。
keep-alive的属性：include（只有匹配的组件会被缓存）和exclude（任何匹配的组件都不会被缓存）

$ route和$router的区别

$route是指比较活跃的路由，正在跳转的对象

$router指VueRouter的实例，含有很多属性和子对象，可以认为是全局的路由对象，包含了所有路由的对象和属性。