route的meta配置项

  1. meta被称为路由元信息,是路由中携带的信息,可以通过自定义meta来实现一些路由时的功能

  2. 使用场景:比如给每一个路由对应的页面设置标题、以及判断某个页面是否需要进行权限校验

    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 // 修改网页标题
        }
    })
    

你可能感兴趣的:(Vue2,javascript,vue.js,前端)