vue-router路由标题title修改

tag="li" //标签
linkActiveClass:'active'//class    
const Home = () => import('../components/Home')//异步加载组件
一、在routes中添加，例如:meta添加title
const routes = [
  {path:"a",component:a,meta:{title:"a"}},
  {path:"b",component:a,meta:{title:"b"}},
  {path:"c",component:a,meta:{title:"c"}},
  {path:"d",component:d}
]

①router.beforeEach((to,from,next){
  if(to.meta.title){
    document.title=to.meta.title
  }else{
    document.title="onceweb"//没有就默认
  }
})

②router.beforeEach((to,from,next){//全局前置守卫 指的是跳转之前把title替换了
  //从from跳转到to      
  document.title=to.matched[0].meta.title
  console.log(to)
  console.log(from)
  next()
})

③router.afterEach((to,from){//全局后置钩子，不需要主动调用next()函数
  //从from跳转到to      
  document.title=to.matched[0].meta.title
  console.log(to)
  console.log(from)
})
②和③的导航守卫，被称之为全局守卫。

④路由独享的守卫
{
  path:'/onceweb',
  component:Onceweb,
  beforeEnter:(to,from,next)=>{
    console.log('about beforeEnter')
    next()
  }
}
⑤组件内的守卫②用法相同


二、定义一个Vue.mixin
Vue.mixin({
  beforeCreate(){
    if(this.$route.meta.title){
      document.title=this.$route.meta.title
    }else{
      document.title="onceweb"//没有就默认
    }
  }
})

三、redirect:重新定义方向,意思默认定向到'#/home',而path:'/'的斜杆可以加，也可以不用加。

routes:[{path:'',redirect:'/home'}]