vue动态路由导航菜单（Vue-ele实战登录页完善，主页由导航展示，路由动态跳转）

本文目录

• Vue-ele实战登录页完善，主页由导航展示，路由动态跳转
• vue3 + ts 后台动态路由菜单渲染
• vue 动态路由/路由权限 解决方案
• Vue实现动态路由
• vue项目 动态路由怎么做
• Vue动态路由

Vue-ele实战登录页完善，主页由导航展示，路由动态跳转

submitForm(formName) {

      this.$refs.validate((valid) =》 {

        /* el-form组件的validate方法 在回调函数中，如果vaild为true，则表示表单验证通过，为false则不通过 */

        if (valid) {

***隐藏网址***

            username:this.ruleForm.username,

            password:this.ruleForm.password

          })

          .then(res=》{

            let {data,meta}=res.data;

            if(meta.status==200){

              this.$message.success(meta.msg);

              localStorage.username=data.username;

              localStorage.token=data.token;

              /* 登陆成功下一秒跳转首页 */

              setTimeout(() =》 {

                this.$router.push({name:’index’})

              }, 1000);

            }else{

              this.$message.warning(meta.msg)

            }

          })

          .catch(err=》{

            console.log(err);

          })

        } else {

          console.log("error submit!!");

          return false;

        }

      });

    }
《template》

  《el-container style="height: 100vh; border: 1px solid #eee"》

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

      《el-menu :default-openeds="" 默认打开第一个菜单 --》

        《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》

          《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: right; font-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》admin《/span》

      《/el-header》

      《el-main》

        《router-view》《/router-view》

      《/el-main》

    《/el-container》

  《/el-container》

《/template》

《script》

import axios from "axios";

export default {

  name: "IndexView",

  data() {

    return {

      navList: ,

    };

  },

  created() {

    this.getNavList();

  },

  methods: {

    getNavList() {

      axios

***隐藏网址***

          headers: {

            Authorization: localStorage.token,

          },

        })

        .then((res) =》 {

          console.log(res);

          let { data, meta } = res.data;

          if (meta.status == 200) {

            this.navList = data;

          } else {

            this.$message.error(meta.msg);

          }

        })

        .catch((err) =》 {

          console.log(err);

        });

    },

  },

};

《/script》

vue3 + ts 后台动态路由菜单渲染

1，创建菜单所以对应的页面

2，创建页面所对应的路由

这里使用了一个插件 coderwhy

使用这个命令符可以快速搭建出上述页面

3，创建map-menus.ts文件

然后在你对应想要获取路由表的地方使用map-menus.ts文件中导出的mapMenusToRoutes函数就可以得到路由表，我的首页叫做mian

参考：

然后菜单组件：

数据返回是这样哒：

最后长这样：

vue 动态路由/路由权限 解决方案

路由权限思路：

1.菜单栏/导航栏(一级权限)
在登录成功后，获取后端的权限数据, 根据权限数据，展示对应的路由导航或菜单即可;

2.界面的控制
如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面.
如果用户已经登录, 用户手动输入的非权限内的路由地址，则给他跳转到404界面.

3.按钮的控制(二级权限)
在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有.
没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮 禁用or隐藏。

4.请求和响应的控制 （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）
如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截.

login.vue

home.vue (elment-ui)
侧边导航栏

store.js

router.js

动态路需两个地方调用:
1 login.vue 中登录成功后立即执行动态路由函数
2 app.vue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了

思路3：按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。
更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可
import ’./utils/permission.js’ --》 main.js中引入文件, 嫌麻烦直接在main.js中写

4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由
后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息

vue项目 动态路由怎么做

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替代），菜单那边拿到路由，进行渲染

Vue动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

你可以看看这个 在线例子 。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL 中有查询参数)、 $route.hash 等等。你可以查看 API 文档 的详细说明。

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫 ：

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( * )：

当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: ’*’ } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。

当使用一个 通配符 时， $route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。