vue的router结构分析

公司里面搬砖的时候，以前的项目有个router的name属性把我卡住了，bug是旁边的小哥帮忙解决的，说是页面的name属性没有和router的name属性一样，导致无法刷新。

src下面的router文件夹和views文件夹往往是相互照应的关系。

而后台管理系统的导航条，是把

和routes相对应。

{
    path: '/pdf',  //url上面显示的东西
    component: Layout,  //Layout就是整个页面，包括导航栏什么的
    redirect: '/pdf/index',//如果是noRedirect就说明是个总的，有children，点他没反应，否则就是跳到指定path
    children: [
      {
        path: 'index',
        component: () => import('@/views/pdf/index'),//children只占右下的绝大部分，这个部分就是这个引入的组件
        name: 'PDF',//与指定的组件里面的name属性相对应，一定要一样
        meta: { title: 'PDF', icon: 'pdf' }  //meta是自定义属性，这里封装好了，title是显示的标题文本，icon是显示的图标。
      }
    ]
  },
  {
    path: '/pdf/download',
    component: () => import('@/views/pdf/download'),
    hidden: true  //说明这个选项会藏起来
  },

这个结构写好了，但是其内部是怎么写的呢？

回到Layout页面

<div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div :class="{hasTagsView:needTagsView}" class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </div>
  </div>

其中的sidebar应该就是导航条的控件

 

<div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>

 

其中，很明显可以看到利用v-for循环渲染sidebar-item这个组件项

而循环的主体permission_routes则是来自vuex

 

 

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'permission_routes',
      'sidebar'
    ]), 
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

（没有学过vuex的学一下，必学的）

vuex的mapgetter，那就打开src目录下的store文件夹，看到一个getter.js

 

 

permission_routes: state => state.permission.routes,

这个routes显然就是登录时会初始化路由的路由数据

generateRoutes({ commit }, roles) {  //初始化路由
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {   //管理员全见
        accessedRoutes = asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)  //否则根据角色显示路由
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }