从历往经验来看,开发一个新项目,每每在刚开始部署项目,到项目的正式交付,以及交付后的后续维护,功能加强等过程,都须要对项目的一些已有结构和逻辑进行调整。html
所以,若是有些内容刚建项目时不考虑好将来的可扩展性,后续调整会很麻烦。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')
复制代码
若是具体还要什么不懂的,仍是多看 官方文档 把bash
到这里我当你已经比较熟悉路由配置的相关知识哦,很细的知识点我就不细说了。app
假设你如今接到一个新项目,产品经理要求你开发一个系统,给你的交互图等资料都是关于系统内部的各个页面。 这时你觉得开发的这个系统就仅仅是直接展现系统内部的状况了,甚至你啥都没想,就直接开始配置路由写页面去了。ide
一开始你差很少写出了如下的路由配置:模块化
// example 1
const router = new VueRouter({
routes: [
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page2 }
]
});
复制代码
像这种配置的,大概就猜出你把系统的菜单等公共部分都放在App.vue
里写好了,而后经过一个<router-view/>
进行系统内容的变动。优化
后面产品经理跟你说,要系统加一个官网、首页之类的存在。!!若是你配了按照上述的路由状况,此时,你是否是有点懵呢?由于你把系统的公共内容如菜单都写在App.vue
上了,可是首页不须要系统的这些部分。网站
尽管你再配出了一个首页的路由,可是你也要想办法去掉那些已有的系统公共部分。
因此咱们不能采用上述配置方式。此时咱们应该把系统自己做为一个路由,系统公共部分写在这个路由映射组件上,而系统内部各页做为子路由,嵌套在其下。
// example 2
const router = new VueRouter({
routes: [
{
path: '/'
component: Main,
children: [
{
path: 'page1',
component: Page1
},
{
path: 'page2',
component: Page2
}
]
}
]
});
复制代码
这里的Main
组件就是系统的入口,菜单等公共部分就是写在这里
此时App.vue
文件的内容应该就直接是一个路由入口了
<!-- App.vue -->
<template>
<div>
<router-view/>
</div>
</template>
复制代码
若是你一开始是这么写的话,那么要新增一些非系统内部的页面,简直就垂手可得了。如新增个首页,直接新增个一级路由就行了
// example 3
const router = new VueRouter({
routes: [
{
path: '/'
component: Main,
children: [...]
},
{
path: '/home'
component: Home
}
]
});
复制代码
可是此时咱们应该要知道,当仅输入你的网站域名(没有具体到哪页)时,会默认打开path: /
的页面,上述例子就是默认打开系统页面了。
你的产品经理又来找事啦。再要求你添加个非系统页,如登陆注册页,打开网站地址域名时默认跳转到登陆页。
嗯,按照上一个配置状况,新增一个登陆页简直so easy,可是要改默认打开页,这就尴尬了。
有人说,直接把系统的那个一级路由改一下不就行了嘛,而后把path: /
留给要求默认打开的页面。
嗯,你说的颇有道理,但我,不听!假设你系统里有比较多的跳转,从系统内某一页跳转到某一页的状况多,即你已经在代码里写了不少个$router.push('xxxx')
,若是这么一改,很麻烦,要一个个找出来进行修改。
所以,咱们一开始的时候,就不该该为系统页直接占用path: '/'
的路由。可是也不能为目前已知的任何一个页面占用path: '/'
,由于即便你如今明确哪一个页面是默认打开页,可是你不能保证你的产品经理不会变心啊,万一后面又要改呢?
因此!咱们要为目前已知的每一个页面都设置路径名,而不能占用path: '/'
;而实现默认打开的功能,就要利用redirect
进行跳转
// example 4
const router = new VueRouter({
routes: [
{
path: '/main'
component: Main,
children: [...]
},
{
path: '/home'
component: Home
},
{
path: '/login',
component: Login
},
{
path: '/',
redirect: '/login'
}
]
});
复制代码
这样的话,不论后面怎么变化,你只须要作新增/删除路由 以及 改变redirect
值控制打开默认页了。这就是最终的解决方案了
仍是在上一个例子结论的基础上进行这节的描述,假设你的系统比较大,有不少的页面,不少的模块,例如菜单栏中有比较多的一级菜单,而每一个一级菜单下又有不少二级菜单甚至子孙菜单。
好,就算你如今拿到的需求是不多系统内容的,可是你也不能保证之后你的系统会发展成什么样,万一卖得很好,加不少功能需求呢。
在上述假设的条件下,那么你就得往children里加不少路由映射了
{
path: '/main'
component: Main,
children: [...]
}
复制代码
如此一来,你的这个文件,一定很长很长!所以,咱们要拆分,进行模块化引入。
能够以你一级菜单的名字命名进行模块拆分,一个一级菜单对应一个文件(若是你的系统有功能模块的区分,那也能够按照功能模块来拆分文件),而后引入到这个主路由配置文件便可。
// example 5
...
import overview from './overview';
import copyrightManager from './copyrightManager';
import monitor from './monitor';
const router = new VueRouter({
routes: [
{
path: '/main'
component: Main,
children: [
{
path: '',
// 默认进入的系统内部页
redirect: 'overview'
},
...overview,
...copyrightManager,
...monitor
]
},
{
path: '/home'
component: Home
}
]
});
复制代码
这里例子中就是把本来写在children里边的一个个路由映射单独写在每一个文件里(本身分类好),而后经过import引进来,利用...
再把它放回进去。
这样维护起来就更加方便啦
关于路由的配置优化介绍就说到这里了,喜欢的话请点个赞。
未经容许,请勿转载