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

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

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

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

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

　　　　//0。导入Vue和VueRouter脚本,如果使用模块化机制编程,要调用Vue.use (VueRouter)//1。定义(路由)组件。//可以从其他文件进口进来　　const Foo={模板:' & lt; div> foo

'} 　　const酒吧={模板:' & lt; div> bar

'}//2。定义路由//每个路由应该映射一个组件。　　const路线=[ 　　{路径:/foo,组件:foo}, 　　{路径:/酒吧,组件:酒吧} 　　]//3。创建路由器实例,然后传“路线”配置//你还可以传别的配置参数,不过先这么简单着吧。　　const路由器=new VueRouter ({ 　　路线//(缩写)相当于路线:路线　　}）//4。创建和挂载根实例。//记得要通过路由器配置参数注入路由,//从而让整个应用都有路由功能　　const应用=new Vue ({ 　　路由器　　})。美元山(“#应用”) 　　　　之前　　　　

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

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

<>强场景1
　　

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

　　　　//例1 　　const路由器=new VueRouter ({ 　　路线:[ 　　{路径:/所述,组件:page 1}, 　　{路径:“所以page2/?所以page2组件:} 　　] 　　})；　　之前　　　　

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

<>强场景2
　　

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

<>强解决方案
　　

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

　　　　//例2 　　const路由器=new VueRouter ({ 　　路线:[ 　　｛　　路径:'/' 　　主要组件:, 　　孩子:( 　　｛　　路径:/所述, 　　Page1组件: 　　}，　　｛　　所以page2路径:“/? 　　所以Page2组件: 　　} 　　] 　　} 　　] 　　})；　　之前　　　　

这里的主要组件就是系统的入口,菜单等公共部分就是写在这里
　　此时应用。vue文件的内容应该就直接是一个路由入口了
　　

　　　　　　& lt; !——App.vue祝辞　　& lt; template> 　　& lt; div> 　　& lt; router-view/比; 　　& lt;/div> 　　& lt;/template> 　　之前　　　　

如果你一开始是这么写的话,那么要新增一些非系统内部的页面,简直就轻而易举了。如新增个首页,直接新增个一级路由就好了
　　

　　　　//示例3 　　const路由器=new VueRouter ({ 　　路线:[ 　　｛　　路径:'/' 　　主要组件:, 　　孩子们:[…] 　　}，　　｛　　路径:“/home” 　　组件:回家　　} 　　] 　　})；　　之前　　　　

但是此时我们应该要知道,当仅输入你的网站域名(没有具体到哪页)时,会默认打开路径:/的页面,上述例子就是默认打开系统页面了。
　　

<>强场景3
　　

你的产品经理又来找事啦。再要求你添加个非系统页,如登录注册页,打开网站地址域名时默认跳转到登录页。