路由模块非常重要，自己基于这个框架进行开发，这个必须吃透！！
前情回顾：

vue-element-admin项目学习笔记（1）安装、配置、启动项目
vue-element-admin项目学习笔记（2）main.js
文件分析

如果对vue路由部分还不是很熟悉的小伙伴，建议可以先去了解一下，或者看一下我的这两篇笔记：

Vue路由简明实操笔记
vue路由守卫简明操作笔记

我们先看一下根组件，app.vue

<template><div id="app"><router-view /></div></template>

里面只有路由出口router-view，由此可见，想用这个项目，把路由搞清楚的重要性！！！

本项目，路由分为两部分，静态路由、动态路由。

  • 静态路由：所有用户可访问，不用匹配权限（如登录页、错误页等等）

  • 动态路由：需要鉴权，动态路由规则

开始：

文件：项目目录/src/router/index.js

先看引入：

// 引入vueimport Vue from 'vue'// 引入路由模块import Router from 'vue-router'// 使用路由，因为路由本质上是插件Vue.use(Router)// 布局组件，非常重要，也就是这个框架的“架子”// 所有一级路由都要去匹配layout组件import Layout from '@/layout'// 引入其他四个路由模块import componentsRouter from './modules/components'import chartsRouter from './modules/charts'import tableRouter from './modules/table'import nestedRouter from './modules/nested'

在项目目录/src/router/index.js文件里，代码export const constantRoutes开始的部分的整个结构体，就是静态路由部分。

这部分路由规则，不需要鉴权，所有用户可访问，不用匹配权限（如登录页、错误页、一些自定义想给用户看的页面等等）

// 这部分定义的constantRoutes，就是静态路由// - 静态路由：所有用户可访问，不用匹配权限（如登录页、错误页等等）// - 动态路由：需要鉴权，动态路由规则export const constantRoutes = [// 每一条路由规则，都是一个对象 // path: '/redirect',访问路径// component: Layout,对应组件// hidden: true, 侧边栏是否显示// children:[{...}]二级路由，规则同一级{path: '/redirect',component: Layout,hidden: true,children: [{path: '/redirect/:path(.*)',// 这种组件导入写法，避免导入一大堆component: () => import('@/views/redirect/index')}]},{path: '/login',//登录路由component: () => import('@/views/login/index'),hidden: true//肯定不显示在侧边栏},{path: '/auth-redirect',component: () => import('@/views/login/auth-redirect'),hidden: true},{path: '/404',component: () => import('@/views/error-page/404'),hidden: true},{path: '/401',component: () => import('@/views/error-page/401'),hidden: true},{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',component: () => import('@/views/dashboard/index'),name: 'Dashboard',meta: { title: 'dashboard', icon: 'dashboard', affix: true }}]},{path: '/documentation',component: Layout,children: [{path: 'index',component: () => import('@/views/documentation/index'),name: 'Documentation',meta: { title: 'documentation', icon: 'documentation', affix: true }}]},{path: '/guide',component: Layout,redirect: '/guide/index',children: [{path: 'index',component: () => import('@/views/guide/index'),name: 'Guide',meta: { title: 'guide', icon: 'guide', noCache: true }}]},{path: '/profile',component: Layout,redirect: '/profile/index',hidden: true,children: [{path: 'index',component: () => import('@/views/profile/index'),name: 'Profile',meta: { title: 'profile', icon: 'user', noCache: true }}]}]