vue51 —— vue-router --- 全局导航守卫

导航守卫： 监听导航

要求点击导航后，浏览器上显示对应导航名

方法1，使用在对应导航组件内使用created()

eg.
Home.vue:

export default {
	name: 'Home',
	created(){
		document.title = '首页'
	}	
}

方法2，导航守卫

方式1. 在index.js中使用beforeEach() --前置守卫(guard)

1.1 先在routes中为各路由添加一个属性：meta，meta属性中再添入title
meta： 元数据，描述数据的数据
eg.

 {
    path: '/user/:userid', 
    component: User,
    meta:{
      title: '用户'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta:{
      title: '档案'
    }
  }

1.2. index.js中使用 beforeEach（）

router.beforeEach((to,from,next) =>{
  // document.title = to.meta.title   //没有嵌套路由的情况可直接这样写
  // console.log(to);
  document.title = to.matched[0].meta.title // 有嵌套路由，如 首页
  
  next()  // 一定要写。进入下一个钩子
})

方式2. 使用 afterEach() --后置钩子（hook）

router.afterEach((to,from) => {
  document.title = to.matched[0].meta.title
})

更多guard，hook，看vue-router官网