vue动态路由

<template>

  <el-container style="height: 100vhborder: 1px solid #eee">

    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

      <!-- :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 -->

      <!-- 1 对应了el-submenu index="1"

           2 对应了el-submenu index="2" -->

      <!-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项-->

      <!--  :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->

      <!-- default-active="/index/users" -->

      <!-- ★  :default-openeds 不可以直接使用['1'] 需要使用一个变量openList代替 因为值随时会变 如果写的

      是['1'] 那么就永远不会改变 会出现点击二级菜单 一级菜单会缩起来的情况-->

      <!-- default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单

      default-active不能直接写死值路径要用变量代替 使用监听器 监听路由解决 -->

      <!-- unique-opened  是否只保持一个子菜单的展开 boolean 默认是false-->

      <el-menu

        :default-openeds="openList"

        :router="true"

        :default-active="pagepath"

        :unique-opened="true"

      >

        <!-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index -->

        <!-- 因为i是从0开始的 所以需要加1 -->

        <el-submenu

          :index="(i + 1).toString()"

          v-for="(v, i) in navList"

          :key="i"

        >

          <template slot="title"

            ><i class="el-icon-menu"></i>{{ v.authName }}</template

          >

          <!-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 -->

          <!-- 因为子选项也是一个数组所以需要再次循环 -->

          <!-- :index="'/index/'+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 -->

          <el-menu-item

            :index="'/index/' + item.path"

            v-for="(item, index) in v.children"

            :key="index"

            >{{ item.authName }}</el-menu-item

          >

        </el-submenu>

      </el-menu>

    </el-aside>

    <el-container>

      <el-header style="text-align: rightfont-size: 12px">

        <el-dropdown>

          <i class="el-icon-setting" style="margin-right: 15px"></i>

          <el-dropdown-menu slot="dropdown">

            <el-dropdown-item>查看</el-dropdown-item>

            <el-dropdown-item>新增</el-dropdown-item>

            <el-dropdown-item>删除</el-dropdown-item>

          </el-dropdown-menu>

        </el-dropdown>

        <span>王小虎</span>

      </el-header>

      <el-main>

        <router-view></router-view>

      </el-main>

    </el-container>

  </el-container>

</template>

<script>

import axios from "axios"

export default {

  data() {

    return {

      navList: [],

      openList: ["1"],

      pagepath: "/index/users",

    }

  },

  watch: {

    /* 当路由发生变化的时候，就把最新的地址给到pagepath变量

    作用是为了保持路由菜单栏的高亮显示 以及解决点击不跳转的bug */

    $route: {

      handler: function (newV) {

        this.pagepath = newV.path

      },

      immediate: true,

    },

  },

  created: function () {

    this.getNavList()

  },

  methods: {

    getNavList: function () {

      axios

        .get("/mock/menu.json", {

          headers: {

            Authorization: localStorage.token,

          },

        })

        .then((res) =>{

          let { data, meta } = res.data

          /* 数据获取成功 */

          if (meta.status == 200) {

            this.navList = data

            /* 动态添加路由菜单 */

            /* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */

            /* slice不会改变原数据 而splice会 */

            let arr = this.navList.slice(1,3)

            /* 循环路由数组 动态添加路由 */

            arr.forEach(v =>{

              /* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */

              /* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了

              如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由

              能够被动态的添加 */

              v.children.forEach(r=>{

                this.$router.addRoute("index", {

                  path: r.path,

                  name: r.path,

                  /* 把名字改成我们页面的名称 例如CategoriesView.vue */

                  component: () =>import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`),

                })

              })

            })

            console.log(this.$router)

          } else {

            /* 防止数据获取失败，给出相应的后台提示 */

            this.$message.error(meta.msg)

          }

        })

        .catch((err) =>{

          console.log(err)

        })

    },

  },

}

</script>

<style scoped>

.el-header {

  background-color: #b3c0d1

  color: #333

  line-height: 60px

}

.el-aside {

  color: #333

}

</style>

1、取出非第一级的所有数据

2、映射出所有路由规则

3、添加路由

4、 登录成功后 保存菜单数据，保存后在vuex直接触发添加事件即可 this.commit('add_route')

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

详情可参阅 花裤衩大佬 的项目 手把手...

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。

大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

菜单名字menName；

菜单路径menPath；

菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后，

menName --->name

menPath --->path

menuUrl ---->components文件

转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件

生成路由表

可以再过滤一遍生成的路由表

下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404

getRouter.push({ path: '*', redirect: '/404', hidden: true })

router.addRoutes(getRouter)//动态添加路由

前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon

因为可能会有多级菜单，所以会出现children下边嵌套children的情况

路由是数组格式

实际前端需要的 component是 component: () =>import('@/views/content/classify'),

因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象

因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件

Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈

beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，

ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤

global.antRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染

---