路由元信息

如何使用

定义路由的时候可以配置meta字段，用于自定义一些信息

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { requiresLogin: true }
        }
      ]
    }
  ]
})

案例

通过路由元信息，与导航守卫实现简易部分网页需要登录才能查看的效果 效果图如下

源码
操作的cookie插件
auth.js

// 判断是否登录
function isLogin (){
    return document.cookie.includes('login=true')
}
// 添加记录
function addLogin(){
    const date = new Date()
    const expiresTime = 147;
    date.setTime(date.getTime() + 147 * 24 * 60 * 60 *1000)
    document.cookie = `login=true;expires=${date.toGMTString()}`
}
// 删除记录
function deleteLogin(){
    const date = new Date()
    date.setTime(date.getTime() - 100000000)
    console.log(date.toGMTString())
    document.cookie = `login=true;expires=${date.toGMTString()}`
}
export default{
    isLogin,
    addLogin,
    deleteLogin,
}

为 /about 与 /academic 添加路由元信息
router.js的代码

const routes = [
    {
        path:'/',
        // 当输入域名访问是，将其其路径重定向为/home
        redirect:'/home'
    },
    {
        path: '/home',
        // 异步加载组件，当标签被点击才会加载组件
        component: () => import('./components/views/Home.vue'),
    },
    {
        path: '/learn',
        // component: () => import('./components/views/Learn.vue')
        // 展示多个命令视图
        // 默认展示名为default视图
        components:{
            default: () => import('./components/views/Learn.vue'),
            // view: () => import('./components/views/Academic.vue'),
        }
    },
    {
        path: '/show',
        // component: () => import('./components/views/Show.vue')
        components:{
            default: () => import('./components/views/Show.vue'),
            view: () => import('./components/views/About.vue')
        }
    },
    {
       // 添加路由元信息
        path: '/about',
        component: () => import('./components/views/About.vue'),
        meta:{
            requiresLogin:true
        }
    },
    {
        path: '/community',
        name:'community',
        component: () => import('./components/views/community.vue'),
        // 重定向
        // 当单击社区时默认选中学术讨论
        // 第一种
        // redirect:'/community/academic',
        // 第二种 通过命令路由
        // redirect: { name:'academic'},
        // 第三种 通过方法
        redirect:to =>{
            return {
                name:'academic'
            }
        },
        // 路由嵌套
        children:[
            {
              // 添加路由元信息
                path:'academic',
                // 命名路由
                name:'academic',
                meta:{
                    requiresLogin: true
                },
                component:()=> import('./components/views/Academic.vue')
            },
            {
                path:'personal',
                name:'personal',
                component: () => import('./components/views/Personal.vue')
            },
            {
                path:'download',
                name:'download',
                component: () => import('./components/views/Download.vue')
            },
        ]
    },
    {
        /**
         * 动态路由匹配
         * /question/下的参数都将是question.vue 渲染出来的
         */
        path:'/question/:id',
        name:'question',
        props:route =>({
            name:route.name,
            id: route.params.id,
        }),
        component:() => import('./components/views/question.vue')
    },
    {
        path:'/login',
        name:'login',
        component: () => import('./components/views/Login.vue')
    }
]

使用全局前置守卫，当拥有路由元信息的需要判断是否登录
router.js的代码

import auth from './components/utils/auth'
// 全局前置守卫
router.beforeEach((to,from,next) =>{
    // 判断to中路由表是否拥有路由元信息，这是为啦防止使用URL直接访问需要登录页面下的子页面从而查看需要登录的页面
    let isRequiresLogin = to.matched.some(item => item.meta.requiresLogin)
    // 是否为需要登录的页面
    if(isRequiresLogin){
        // 判断是否登录
        const isLogin = auth.isLogin()
        if(isLogin){
            // 当登录过就放行
            next()
        }else{
            // 没有登录让其跳转到登录页面,也可以不跳转
            const result =  window.confirm('请登录')
            if(result){
                next('/login')
            }
        }
    }else{
        // 不是需要登录的页面直接放行
        next()
    }
})