Vue之addRoutes注意事项

通常一个 spa web 应用都不是单一功能，所以 Vur 通常和 Vue-Router 等其他插件一起配合使用，而一般来说 spa 的权限控制会采用动态路由。

动态加载路由

在许多的教程里面，我们会提前定义好路由表，前端实际上加载的是全量路由，然后在路由守卫中通过逻辑判断是否放行。当然这是一种方式，但今天我们讨论的是动态注册路由及组件动态加载（我自己这么叫）。

那么我所谓的动态注册路由及组件动态加载，解决了一个什么问题呢。从过往的经验中来看，如果面对一个复杂的 web 应用，各种页面总数可能达到几十个甚至几百个，如果都去定义路由表，那么这项工作将变得极为繁琐。【此处我们先不纠结于为什么这个 web 应用会如此庞大，或者为什么没有引入微前端架构】

那么有没有一种办法，就是大家都按照一定的规则来约定项目结构，然后路由表只定义几个常用的登录、首页、错误处理等。服务器上配置路由后，前端根据服务器返回的路由动态的注册和加载路由呢。比如下面的这个目录结构：

—src
    -views
        -home
            index.vue
        -mine
            index.vue
            -profile
                index.vue
            -setting
                index.vue
                -index
                    index.vue
                -privacy
                    index.vue

那么我们就可以认为 /home 就是主页；/mine/profile 就是个人信息；/mine/setting/index 就是设置；/mine/setting/privacy 就是隐私设置。

代码如下（未经过测试）：

// router.js
import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

function loadView(view) {
	return () => import(`@/views/${view}.vue`);
}

const router = new Router({
	mode: "history",
	routes: [
		{
			path: "/",
			name: "home",
			component: loadView("Home"), // 懒加载Home组件
		},
		// 更多静态路由...
	],
});

// 动态添加路由
router.onReady(() => {
	router.addRoute({
		path: "/dynamic",
		name: "dynamic",
		component: loadView("Dynamic"), // 懒加载Dynamic组件
	});
});

export default router;

在好几年以前，我们尝试过类似的方法，但是最终结果发现没有实现动态引入组件（虽然代码中是这么实现，但最终还是全量加载了所有组件），后来不得已采用了 nodejs 在打包前通过文件操作的方式动态生成一个 router.json，用来完成传统的手动注册的路由。

还是动态加载路由

有一种场景，就是获取到路由权限后切换了账号，此时发现没有删除路由的 api（还是 20 年左右），我们采用了简单粗暴的方式，直接清除缓存并重定向到登录页。

但是现在已经有 removeRoute 这个 API 了。

常量路由放到最后

我们知道 vue 的路由匹配规则是根据 path 字段来进行匹配，而 path 字段允许多级匹配和通配符匹配，比如我们会把 404 之类的常量路由 path 写作 ‘*‘, 如果将这个路由放置到前面，那后续的路由都将不能正确命中，就会导致 bug。

[越努力，越幸运！]