vue常见路由配置实例

import Vue from 'vue'
import Router from 'vue-router'

import Store from '../store'

Vue.use(Router)

let router = new Router({
    routes: [{
            path: '/',
            component: () => import('../components/pages/index'),
            children: [{
                    path: 'menu',
                    component: () => import('../components/pages/setting/menu', ),
                    meta: {
                        seleted: '/menu'
                    }
                },
                {
                    path: 'menu/add',
                    component: () => import('../components/pages/setting/menuAdd'),
                    meta: {
                        seleted: '/menu'
                    }
                },
                {
                    path: 'menu/:id',
                    component: () => import('../components/pages/setting/menuAdd'),
                    meta: {
                        seleted: '/menu'
                    }
                },
                {
                    path: 'role',
                    component: () => import('../components/pages/setting/role'),
                    meta: {
                        seleted: '/role'
                    }
                },
                {
                    path: 'role/add',
                    component: () => import('../components/pages/setting/roleAdd'),
                    meta: {
                        seleted: '/role'
                    }
                },
                {
                    path: 'role/:id',
                    component: () => import('../components/pages/setting/roleAdd'),
                    meta: {
                        seleted: '/role'
                    }
                },
                {
                    path: 'user',
                    component: () => import('../components/pages/setting/user'),
                    meta: {
                        seleted: '/user'
                    }
                },
                {
                    path: 'user/add',
                    component: () => import('../components/pages/setting/userAdd'),
                    meta: {
                        seleted: '/user'
                    }
                },
                {
                    path: 'user/:id',
                    component: () => import('../components/pages/setting/userAdd'),
                    meta: {
                        seleted: '/user'
                    }
                },
                {
                    path: 'analyze',
                    component: () => import("../components/pages/analyze"),
                    meta: {
                        seleted: '/analyze'
                    }
                },
                {
                    path: 'cate',
                    component: () => import("../components/pages/category/cate"),
                    meta: {
                        seleted: '/cate'
                    }
                },
                {
                    path: 'cate/add',
                    component: () => import("../components/pages/category/cateAdd"),
                    meta: {
                        seleted: '/cate'
                    }
                },
                {
                    path: 'cate/:id',
                    component: () => import("../components/pages/category/cateAdd"),
                    meta: {
                        seleted: '/cate'
                    }
                },
                {
                    path: 'specs',
                    component: () => import("../components/pages/goodsSize/index"),
                    meta: {
                        seleted: '/specs'
                    }
                },
                {
                    path: 'specs/add',
                    component: () => import("../components/pages/goodsSize/info"),
                    meta: {
                        seleted: '/specs'
                    }
                },
                {
                    path: 'specs/:id',
                    component: () => import("../components/pages/goodsSize/info"),
                    meta: {
                        seleted: '/specs'
                    }
                },
                {
                    path: 'goods',
                    component: () => import("../components/pages/goods/index"),
                    meta: {
                        seleted: '/goods'
                    }
                },
                {
                    path: 'goods/add',
                    component: () => import("../components/pages/goods/info"),
                    meta: {
                        seleted: '/goods'
                    }
                },
                {
                    path: 'goods/:id',
                    component: () => import("../components/pages/goods/info"),
                    meta: {
                        seleted: '/goods'
                    }
                },
                {
                    path: 'banner',
                    component: () => import("../components/pages/banner/index"),
                    meta: {
                        seleted: '/banner'
                    }
                },
                {
                    path: 'banner/add',
                    component: () => import("../components/pages/banner/info"),
                    meta: {
                        seleted: '/banner'
                    }
                },
                {
                    path: 'banner/:id',
                    component: () => import("../components/pages/banner/info"),
                    meta: {
                        seleted: '/banner'
                    }
                },
                {
                    path: 'seck',
                    component: () => import("../components/pages/seck/index"),
                    meta: {
                        seleted: '/seck'
                    }
                },
                {
                    path: 'seck/add',
                    component: () => import("../components/pages/seck/info"),
                    meta: {
                        seleted: '/seck'
                    }
                },
                {
                    path: 'seck/:id',
                    component: () => import("../components/pages/seck/info"),
                    meta: {
                        seleted: '/seck'
                    }
                },
                {
                    path: 'client',
                    component: () => import("../components/pages/user/index"),
                    meta: {
                        seleted: '/client'
                    }
                },
                {
                    path: 'client/add',
                    component: () => import("../components/pages/user/info"),
                    meta: {
                        seleted: '/client'
                    }
                },
                {
                    path: 'client/:id',
                    component: () => import("../components/pages/user/info"),
                    meta: {
                        seleted: '/client'
                    }
                },
                {
                    path: '',
                    redirect: 'analyze'
                }


            ]
        },
        {
            path: '/login',
            component: () => import('../components/pages/login')
        },
        {
            path: '/',
            redirect: '/'
        }
    ]
})

//  全局路由守卫
// router.beforeEach((to, from, next) => {
//     if (to.fullPath != '/login') {
//         if (!Store.state.obj.username) {
//             next('/login')
//         } else {
//             // 判断当前访问的路由是否在该用户所能访问的范围内
//             let menusUrl =  localStorage.getItem('menusUrl').split(",");
//             menusUrl.push('/');   //将首页色路由放到能访问到的权限范围
//             menusUrl.push('/analyze');   
//             // 当前访问地址
//             let urlArr = to.fullPath.split('/');
//             let nowUrl = "/"+urlArr[1];


//             // 判断当前路由是否在能被访问的路由范围内
//             let isExist = menusUrl.indexOf(nowUrl);
//             // 值为-1相当于不存在，则不让跳转
//             if(isExist >= 0){         
//                 next();            
//             }else{  
//                 next(false)
//             }         
//         }
//     } else {
//         next()
//     }
// })


export default router