详解如何写出一个利于扩展的vue路由配置

前言

从历往经验来看，开发一个新项目，往往在刚开始部署项目，到项目的正式交付，以及交付后的后续维护，功能增强等过程，都需要对项目的一些已有结构和逻辑进行调整。

因此，如果有些内容刚建项目时不考虑好未来的可扩展性，后续调整会很麻烦。

这里先来说，在vue项目中，如何写路由配置，更利于未来可扩展。

vue-router的基本配置

为了方便新学者的阅读与理解。先来看一下最基本的路由是如何配置的

// 0. 导入Vue和VueRouter脚本，如果使用模块化机制编程，要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定义路由// 每个路由应该映射一个组件。const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }]// 3. 创建 router 实例，然后传 `routes` 配置// 你还可以传别的配置参数, 不过先这么简单着吧。const router = new VueRouter({ routes // (缩写) 相当于 routes: routes})// 4. 创建和挂载根实例。// 记得要通过 router 配置参数注入路由，// 从而让整个应用都有路由功能const app = new Vue({ router}).$mount('#app')

如果具体还要什么不懂的，还是多看官方文档 把

便于扩展的路由设置

到这里我当你已经比较熟悉路由配置的相关知识哦，很细的知识点我就不细说了。

场景1

假设你现在接到一个新项目，产品经理要求你开发一个系统，给你的交互图等资料都是关于系统内部的各个页面。 这时你以为开发的这个系统就仅仅是直接展示系统内部的情况了，甚至你啥都没想，就直接开始配置路由写页面去了。
一开始你差不多写出了以下的路由配置：

// example 1const router = new VueRouter({  routes: [    { path: '/page1', component: Page1 },    { path: '/page2', component: Page2 }  ]});

像这种配置的，大概就猜出你把系统的菜单等公共部分都放在App.vue里写好了，然后通过一个<router-view/>进行系统内容的变更。

场景2

后面产品经理跟你说，要系统加一个官网、首页之类的存在。！！如果你配了按照上述的路由情况，此时，你是不是有点懵呢？因为你把系统的公共内容如菜单都写在App.vue上了，但是首页不需要系统的这些部分。
尽管你再配出了一个首页的路由，但是你也要想办法去掉那些已有的系统公共部分。

解决方案

所以我们不能采用上述配置方式。此时我们应该把系统本身作为一个路由，系统公共部分写在这个路由映射组件上，而系统内部各页作为子路由，嵌套在其下。