Vue3路由元信息

路由元信息即定义路由时的meta信息
使用路由元信息定义页面在浏览器显示的标题

定义路由

const router = createRouter({
  history:createWebHistory(import.meta.env.BASE_URL),
  routes:[
    {
      path:"/",
      component:()=>import("@/components/Login.vue"),
      meta:{
        title:'登陆页面'
      }
    },
    {
      path:"/index",
      component:()=>import("@/components/Index.vue"),
      meta:{
        title:"首页"
      }
    }
  ]
})

导航守卫中使用

router.beforeEach((to,from,next)=>{
  console.log(to);
  document.title = to.meta.title;
  bar.component?.exposed?.startLoading()
  if(whileList.includes(to.path) || localStorage.getItem('token')){
    next()
  }else{
    next('/')
  }
  
})

直接使用会报一下错误

需要在定义路由时,给RouterMeta增加自定义类型

declare module 'vue-router'{
  interface RouteMeta{
    title:string
  }
}