路由的创建过程在
import Vue from 'vue' import Router from 'vue-router'
Vue.use(Router)
/* Layout */ import Layout from '@/layout'
/** * Note: sub-menu only appear when route children.length >= 1 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html * * hidden: true if set true, item will not show in the sidebar(default is false) * alwaysShow: true if set true, will always show the root menu * if not set alwaysShow, when item has more than one children route, * it will becomes nested mode, otherwise not show the root menu * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb * name:'router-name' the name is used by <keep-alive> (must set!!!) * meta : { roles: ['admin','editor'] control the page roles (you can set multiple roles) title: 'title' the name show in sidebar and breadcrumb (recommend set) icon: 'svg-name' the icon show in the sidebar breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) activeMenu: '/example/list' if set path, the sidebar will highlight the path you set } */
/** * constantRoutes * a base page that does not have permission requirements * all roles can be accessed */ export const constantRoutes = [ { path: '/login', component: () => import('@/views/login/index'), hidden: true },
{ path: '/404', component: () => import('@/views/404'), hidden: true },
{ path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } } ] }, { path: '/example', component: Layout, redirect: '/example/table', name: 'Example', meta: { title: 'Example', icon: 'example' }, children: [ { path: 'table', name: 'Table', component: () => import('@/views/table/index'), meta: { title: 'Table', icon: 'table' } }, { path: 'tree', name: 'Tree', component: () => import('@/views/tree/index'), meta: { title: 'Tree', icon: 'tree' } } ] },
{ path: '/form', component: Layout, children: [ { path: 'index', name: 'Form', component: () => import('@/views/form/index'), meta: { title: 'Form', icon: 'form' } } ] },
{ path: '/nested', component: Layout, redirect: '/nested/menu1', name: 'Nested', meta: { title: 'Nested', icon: 'nested' }, children: [ { path: 'menu1', component: () => import('@/views/nested/menu1/index'), // Parent router-view name: 'Menu1', meta: { title: 'Menu1' }, children: [ { path: 'menu1-1', component: () => import('@/views/nested/menu1/menu1-1'), name: 'Menu1-1', meta: { title: 'Menu1-1' } }, { path: 'menu1-2', component: () => import('@/views/nested/menu1/menu1-2'), name: 'Menu1-2', meta: { title: 'Menu1-2' }, children: [ { path: 'menu1-2-1', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'), name: 'Menu1-2-1', meta: { title: 'Menu1-2-1' } }, { path: 'menu1-2-2', component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'), name: 'Menu1-2-2', meta: { title: 'Menu1-2-2' } } ] }, { path: 'menu1-3', component: () => import('@/views/nested/menu1/menu1-3'), name: 'Menu1-3', meta: { title: 'Menu1-3' } } ] }, { path: 'menu2', component: () => import('@/views/nested/menu2/index'), meta: { title: 'menu2' } } ] },
{ path: 'external-link', component: Layout, children: [ { path: 'https://panjiachen.github.io/vue-element-admin-site/#/', meta: { title: 'External Link', icon: 'link' } } ] },
// 404 page must be placed at the end !!! { path: '*', redirect: '/404', hidden: true } ]
var DynamicMenu = [ { path: '/Test', // 输入网址 component: Layout, // 类似母版页 redirect: '/TestPage1', // 输入后如果没有实体页面，则用这个重新跳转 name: 'Test', meta: { title: 'Test', icon: 'example' }, children: [ { component: () => import('@/views/TestPage/TestPage1'), // 实体页面 path: '/TestPage1', // 地址栏路径 // set router name. It must be set，in order to avoid problems with <keep-alive>. // https://blog.csdn.net/danruWang/article/details/91953571 对keep-alive的说明 name: 'TestPage33333', // 渲染的时候进行指定routerview部分 // 标签页的抬头和图标，侧边栏的名称和图标,// 面包屑部分 三个都有变化 meta: { title: 'TestPage33333', icon: 'example' } }, { component: () => import('@/views/TestPage/TestPage2'), // 实体页面 path: '/TestPage2', name: 'TestPage2', meta: { title: 'TestPage2', icon: 'dashboard' } } ] } ]
var aaa = constantRoutes.concat(DynamicMenu) console.log(aaa)
// 定义创建Router方法， const createRouter = () => new Router({ // mode: 'history', // require service support scrollBehavior: () => ({ y: 0 }), routes: aaa }) console.log('创建路由') const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router }
export default router
静态页面 + 数据库读取的动态页面， component 引入实体页面 path 页面网址路径 hidden 页面是否隐藏，用于弹出 name 用于keep-alive,这部分没测试，当前测试项目暂未设计 meta:tile ,icon 侧边栏的名称，图标， 面包屑的名称 ，页面标签的说明 逻辑=》 先定义静态路由，再获取动态路由，静态路由套动态路由 最后 创建路由 const router = createRouter()
后台数据到前台后要进行拼接