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