路由和侧边栏

路由和侧边栏是组织起一个后台应用的关键骨架。
本项目中侧边栏和路由是绑定在一起的（之前hs的权限管理系统也如此），只需要配置路由，侧边栏就能动态生成了。
设置路由的规则：

// 如果不想让侧边栏出现该条菜单，设置
hidden: true // (默认 false)

// 401 和 404 这种页面多是全屏，需要配置根级路由
所以，根级路由配置401、404 不需要 设置hidden:true

// 面包屑部分不具有重定向功能，没有销售，颜色不变
redirect: 'noRedirect'

// 当路由中children内子路由长度大于1 和 等于1 
等于1的时候  父节点的菜单不显示，显示children内的菜单，子菜单作为根菜单显示，无子菜单（注意：子节点不设置 hidden: true,并且都设置meta中的title）
大于1的时候  菜单会变成嵌套的（2层路由都显示）

// 一直显示跟路由
alwaysShow: true

name: 'router-name' // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
meta: {
  roles: ['admin', 'editor'] // 设置该路由进入的权限，支持多个权限叠加，你可以在根路由设置权限，这样它下面所有的子路由都继承了这个 
  权限
  title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
  icon: 'svg-name' // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
  noCache: true // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false //  如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
  affix: true // 如果设置为true，会始终固定在tags-view中(默认 false)，没有关闭的x
  // 在特殊页面，指定高亮菜单 activeMenu: '/article/list' （需要全路径）
  // 使用场景
  1、详情文章页面，高亮文章列表菜单
  2、编辑页面，高亮列表菜单
}

路由分为两种，constantRoutes 和 asyncRoutes。
constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。

asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
如果使用动态路由，404页面一定要放到最后，否则404后面的路由配置无效，都进入到404页面

递归组件：SidebarItem 自己调用了自己
submenu 是嵌套子菜单 el-menu-item是链接

el-menu中设置:unique-opened="false" 是否只保持一个子菜单的展开

如果你的路由是多级目录， 有三级路由嵌套的情况下，不要忘记还要手动在二级目录的根文件下添加一个 <router-view>。
思考：如果页面中有多个三级目录，可以弄个routerViewTemplate，在二级component中引入

<template>
  <div>
    <router-view />
  </div>
</template>

原则上有多少级路由嵌套就需要多少个<router-view>。
注意：
用户点击当前高亮的路由并不会刷新 view，因为 vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化
思考：点击菜单时，刷新网址

image.png

methods:

testClick(key) {
      this.$router.push({
        path: key,
        query: {
          t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
        }
      })
    }

关于局部刷新的第二种方法：
跳转到Redirect页面之后再重定向到原始页面
router.js中配置redirect页面

7438e6d1adce68efc0fd6ec81cdf110.jpg

刷新页面时候触发的方法

refreshView() {
      // In order to make the cached page re-rendered
      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)

      const { fullPath } = this.$route

      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath
        })
      })
    }

重定向页面的代码

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

注意：path: '/redirect/:path(.)',:path是params传参 (.)是正则
正则中
.代表任意字符
代表0个或多个
()不属于正则语法，就是通过（） 写正则
可能有1层path（http://localhost:9527/#/dashboard）、多层path（http://localhost:9527/#/components/json-editor）
只设置path: '/redirect/:path', 是不能匹配多级路由的（/redirect/components/json-editor）所以设置了path: '/redirect/:path(.)'

面包屑：
通过watch $route 变化动态生成面包屑元素。当进入刷新页面（刷新页面属于临时中转页面）不重新生成面包屑成分

侧边栏外链：
在对应路由的path设置外链地址，点击菜单就能跳转对应页面

Link组件部分
vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染
component组件，有is属性，可以指定要渲染什么组件
外面套一层<keep-alive> 可以缓存动态组件
<keep-alive>
<component :is="comName"/>
</keep-alive>
keep-alive 知识点：
keep-alive 会把内部的组件进行缓存，而不是销毁组件；
使用 keep-alive 的时候，可以通过 include 指定哪些组件需要被缓存；或者，通过 exclude 属性指定哪些组件不需要被缓存；但是：不要同时使用 include 和 exclude 这两个属性；
include 属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:
<keep-alive include="LeftCom,RightCom">

<component :is="type" v-bind="linkProps(to)"/> 中v-bind={}是一种合并写法
独立写法和合并写法含有共同属性，要看3x和2x

4b0edf01a1925382755c40c0c738d3a.jpg

思考：
不论3x，2x 把独立的写在后面，替换，也是以独立的为准

侧边栏有两种形式即：submenu 和 直接 el-menu-item。 一个是嵌套子菜单，另一个则是直接一个链接

可以通过default-openeds，设置侧边栏默认展示菜单
注意 :default-openeds="['/example','/nested']" 里面填写的是 submenu 的 route-path