VUE路由判断权限

可以通过路由去判断是否有权限访问相应页面

使用router.beforeEach，在跳转路由前添加判断

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('@/views/Home.vue'),
        children: [
            {
                path: '/',
                name: 'creatApp',
                component: resolve => require(['@/components/home.vue'], resolve),
                meta: {
                  title: '首页',
                }
            },
            {
                path: '/userIndex',
                name: 'userIndex',
                component: resolve => require(['@/components/user/Index.vue'], resolve),
                children: [
                    {
                        path: '/userIndex',
                        name: 'personIndex',
                        component: resolve => require(['@/components/user/person/Index.vue'], resolve),
                        meta: {
                            title: '统计监控'
                        }
                    }
                ]
            },
         
        ]
    },
    {
        path: '*',
        name: '404',
        component: () => import('@/components/404/404.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

router.beforeEach((to, from, next) => {
    console.log(to.meta.title)  // 即将调转路由的title
    if('有权限') {
        // 直接通过
        next()
    }else {
        // 跳转到无权限页面
        router.push('404')
    }
})

export default router