vue之“动态路由”

💡 如何根据登录用户的权限构建该用户能够访问的路由

🙄️：在我自己做之前，我疯狂百度，夸张地说，基本上看了所有关于如何实现上述问题的帖子和文章，不管是何种原因，最后展示的结果都非常不尽人意。

这时候可能会有人说了👇

😈：你怎么不看官网呢？

ps：怎么可能不看官网，老子先看的就是官网😓

这里附上官网链接🔗：https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html

🤔️：个人觉得，官网的误导性很强，当然也可能是我的技术不到家，知识不够，但对于一个自学的小白来说，我觉得是这样的。

官网给出了两个🌰：

1. 添加路由

2. 在导航守卫中添加路由

乍一看，嗯，很清楚，好了，用吧....

先说一下我的踩坑之路：

1. 我直接在路由跳转前进行了相关路由的添加，（这时我已经想到了刷新可能会导致这个路由会404，但是我就非得试试😬），好的，结果果然不出我所料😎，一刷新就没了😭

2. 那我就在导航守卫里加，这回应该没毛病了吧，在每次路由跳转之前我都加一下路由，很好，思路没有问题开始实践！结果当然是失败啦，要不我也不会弄了好几个小时，到处找文章，给自己气个半死咯💢！

这里我们先看一下鱼聪明的回答：

好的我理解了，用Java打个比方

public class Main {

private static final Integer num1= 1;

private Integer num2;

public Main() {

}

public void setNum2(Integer num2) {

this.num2 = num2;

}

原来的路由就相当于num1，后添加的路由就像是num2，我们需要调用方法才可以给num2赋值。

而鱼聪明给出的方法，包括网上的一些文章，都是在做什么处理，num2存起来，new一个Main1和Main2，再分别赋值给它们。

对这样的操作我只能以这样一个表情来回答🤨。

说了这么多，是时候切入正题了，说下我的解决方法（以下都是自己的理解，如果哪里说错了，说的不准确，希望大佬能够指正！）：

刷新操作，实际上就是重新构建vue实例，router的index.js也会重新加载，就像重新new一个类，我们为什么不直接把所谓的动态路由直接转变为静态路由，也就是在router的index.js中直接调用router.addRoute()，可能官网上的意思也是这样，但是我觉得他的表述并不准确，从而让我走了很多弯路😬。

router index.js 代码如下：

import { createRouter, createWebHistory } from "vue-router";

import store from "../store"; // 这里的vuex路径根据实际情况替换

const routes = [...]

const router = createRouter({

history: createWebHistory(),

routes,

});

// 获取用户登录的标志

const token = getToken()

if (token) {

// 获取用户权限所对应的路由

const adminRoute = getAdminRoute() // 通常为一个父路由下有很多子路由

router.addRoute(adminRoute)

}

// 可能还会有什么其他，像导航守卫什么的在这就直接略了

export default router;

这样写了话，就完美实现了我的需求！🎉

全部是自己的理解，讲述的东西也不专业，真心希望懂的大佬能给我讲一下原理，讲一下完整的过程和成熟的写法，拜托了🙏！

相关专栏

踩坑日记