对路由的说明(六)

路由的创建过程在

对路由的说明(六)

 

 

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()
  后台数据到前台后要进行拼接

 

   
上一篇:23.Vue Router路由基本使用


下一篇:1.8字典