-
meta被称为路由元信息,是路由中携带的信息,可以通过自定义meta来实现一些路由时的功能
-
使用场景:比如给每一个路由对应的页面设置标题、以及判断某个页面是否需要进行权限校验
routes: [ { // 给该路由命名为guanyv name: 'guanyv', path: '/about', component: () => import('../views/About.vue') // 自定义title属性和isAuth属性,用于在路由导航守卫中使用,给页面设置标题和权限校验 meta: { title: '关于', isAuth: true} }, ... ]
// 使用全局前置路由守卫对页面进行鉴权 router.beforeEach((to, form, next) => { // 通过判断是否需要进行鉴权 if (to.meta.isAuth) { if (localStroage.getItem('token') === 'xxxx') { // 符合条件,放行进入下一路由 next() } else { console.log('校验失败') } } }) // 使用全局后置路由守卫修改页面标题 router.afterEach((to, form, next) => { // 判断即将进入的页面路由元信息中是否有title属性 if (to.meta.title) { document.title = to.meta.title // 修改网页标题 } })
route的meta配置项
于 2022-07-27 23:02:00 首次发布