引子
开发过前端单页面应用的小伙伴们，应该对前端路由都不陌生吧。
无论是用 vue 或者 react，都有官方提供的 router 方案。
但是有些场景下，处于安全性和友好性考虑，我们需要用到动态路由。
如果你不知道什么叫动态路由，可以想一想下面的场景。
比如现在我们的项目中有一些页面，只有 vip 用户能看到，普通用户不能看到，那么我们怎么做呢？
我们首先的做法肯定是，将该页面的入口隐藏掉。但是如果仅仅只是这样做，还不够，那只是假隐藏，因为用户仍然可以通过直接输入链接的方式来访问到该页面。
正确的做法应该是：首先隐藏掉入口；其次根据用户的权限，动态的生成对应的路由。
这篇文章主要是想分享下，最近使用 vue-router 4.0 版本过程中，由于用到了动态路由引起的一些问题，以及个人研究出来的解决方案。
为了清楚的描述我们的问题，现在假设我们有两个这样的页面：
那么我们就会对应着两个不同的路由：
[{path: '/home', name: 'home', component: Home },{path: '/vip', name: 'vip', component: Vip }]
当然为了简化业务模型，这里，我们只用了两个路由。分别对应着两个页面，一个是所有用户都能看到的主页 home；一个是登录了的用户才能看到的 vip 页面。
当然在实际的业务逻辑中，肯定是需要登录、注册等页面，这里假设这些操作我们都能在 home 页面内完成。
如果不需要根据用户来区分的话，我们直接像下面这样生成对应的路由即可：
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),scrollBehavior: () => ({y: 0 }),routes: [// 重定向到 /home 路径{path: '/', redirect: "/home", },{path: '/home', name: 'home', component: Home },{path: '/vip', name: 'vip', component: Vip },// 404 页面{path: "/404",name: "NotFound",component: () => import("@views/404.vue"),hidden: true,meta: {title: "404" },},// 当什么都没有匹配到的时候，重定向页面到 404 页面{path: "/:pathMatch(.*)", redirect: "/404", name: "notMatch", hidden: true },],})
但是如果现在的需求是需要我们来动态的区分，我们应该怎么做呢？
动态路由
我们先来了解下，如何实现动态路由。
如果你没有用过 vue-router 的动态路由，可以先参考下 vue-router 的官方文档：
Dynamic Routing | Vue Router
根据文档里所写，想要动态的添加、删除路由，直接通过下面的方式即可：
// 增加 routerouter.addRoute({path: '/home', name: 'home', component: Home })// 删除 routerouter.removeRoute('home')
初窥门径
所以，我们可以稍微改造下我们之前的代码：
// router.jsconst router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),scrollBehavior: () => ({y: 0 }),routes: [// 重定向到 /home 路径{path: '/', redirect: "/home", },{path: '/home', name: 'home', component: Home },// 404 页面{path: "/404",name: "NotFound",component: () => import("@views/404.vue"),hidden: true,meta: {title: "404" },},// 当什么都没有匹配到的时候，重定向页面到 404 页面{path: "/:pathMatch(.*)", redirect: "/404", name: "notMatch", hidden: true },],})export default router;// api.jsexport const login = async () => {// 执行登录操作let res = await dologin();if (res.sucess) {await storeUserInfo(res);// 登录成功，动态的添加 vip 路由router.addRoute({path: '/vip', name: 'vip', component: Vip });}}// permission.jsrouter.beforeEach(async (to, from, next) => {// 如果存在用户信息if (await getUserInfo()) {// 如果 vip 这个 router 没有初始化，那么动态的增加 vip 路由if (!router.hasRoute("vip")) {router.addRoute({path: '/vip', name: 'vip', component: Vip });}}next();});router.afterEach((to) => {// 在导航被确认后，调用 afterEach 钩子，执行一些操作doSomething();});
经过改造之后，我们在初始化的时候，没有加入 vip 路由，那么你即使直接通过/vip链接也无法访问到该页面，会被最后的notMatch路由匹配到，最后被重定向到404页面。
关于noMatch路由的用法，不了解的小伙伴，可以参考下 vue-router 官方文档：Dynamic Route Matching with Params | Vue Router。他的作用是，确保当路由没有匹配到的时候，永远能正确的将页面导航到404页面。
当用户在我们 home 页面执行登录操作，登录成功后，保存用户信息，并且动态的添加vip路由。
当然，仅仅只是在登录的时候动态新增路由，还不够。
为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。
所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。
如果你不了解 router 的生命周期的话，可以参考下这个页面：Navigation Guards | Vue Router
在beforeEach方法内，我们每次通过getUserInfo方法拿用户的信息。当我们识别到存在用户信息后，就需要判断路由vip是否存在，当不存在的时候，动态的创建该路由。
可以说，整个流程下来，是很清晰明了的，逻辑也很通畅。
棘手的问题
如果没有经验的小伙伴，也许看不出来，上面的代码会出现什么问题。
设想下，用户在实际使用我们的系统的时候，可能会通过几种场景进入我们的 vip 页面。
一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被noMatch捕获，然后再进一步重定向到404页面。
也就是说，这种未登录的场景下，会被跳转到404页面。当然为了用户让用户体验更友好，这时候，其实我们应该先提醒用户登录，登录成功后再激活路由跳转。如果这时候，用户不想登录，那么我们可以直接拒绝用户的跳转需求。
另外一种场景是，当用户已经登陆过了，这时候他点击 vip 路由，想要跳转。这时候，借助我们上面改造过的代码，直接跳转到vip页面，不存在任何的问题。
但是还有第三种使用场景是，用户不通过我们的home页面进入vip页面，他直接在浏览器上输入链接/vip，想一步到位，直接进入我们的vip页面。
这第三种使用场景下面，也会分为两种子情景。当用户未登录，自然是拿不到用户信息，也没有 vip 路由，自然会被noMatch捕获到，最后重定向到404页面；当用户已经登录，系统也存在用户信息，我们通过getUserInfo方法也能拿到用户的信息，然后也会进一步成功的动态创建vip路由，这时候，你在实际使用的时候，还是会发现，我们仍旧被重定向到了404页面了。
这第三种情况下的第二种子情景，就是我们这篇文章想要解决的问题。
我们理想中使用过程中的流程是下面这样的：
但是却走不通，是为什么呢？
原来真实的流程是下面这样的：
解决方案
了解了实际的流程走向后，我们就知道该怎么解决这个问题了。
我们可以在动态增加了vip路由后，再直接把用户重定向到 vip 页面就行了。
整个流程就会变成下面这样：
理清了思路以后，我们就可以着手来改造我们的代码了。
// permission.jsrouter.beforeEach(async (to, from, next) => {// 如果存在用户信息if (await getUserInfo()) {// 如果 vip 这个 router 没有初始化，那么动态的增加 vip 路由if (!router.hasRoute("vip")) {router.addRoute({path: '/vip', name: 'vip', component: Vip });}// 如果当前路由目标是 /404，且来自 /vipif (to.name === "NotFound" && to.redirectedFrom?.path === "/vip") {// 重定向到 /vip 路由next({path: to.redirectedFrom.path,query: to.redirectedFrom.query,replace: true,});return;}}next();});
我们在添加完vip路由以后，可以判断，当前想要加载的路由是否为404，如果是，并且是由/vip跳转而来，则再重定向回去即可。
当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。
后记
个人习惯，每次写完一篇技术文章，总想总结点啥，因此都会写个后记。
看起来可能会像是“无病呻吟”，所以，要是不感兴趣的小伙伴可以直接略过即可。
虽然本文中的脉络很清晰，给人感觉好像轻车熟路，能够轻易地药到病除的感觉。但是在实际碰到这个问题的过程中，远没有现在写的这么轻松。
现在总结的时候，可以看作是开了上帝视角，一下子就抓住关键点。但是当你身处漩涡中心的时候，你就是局中人，你是很难跳脱开来，精准定位问题所在的。
不过我挺认同一个观点的，从解决 bug 的能力就能看出一个程序员的水平。
不存在没有 bug 的程序，甚至于有些问题其实就是无解的。大多数情况先，我们能做的也只不过是在权衡利弊的情况下，找到一种最佳的解决方案而已。
共勉之！愿天下没有难解决的 bug！
本文首发自今日头条：/article/7252565650931991101/
