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'}]