我们在使用Vue做项目开发的时候,路由这一块肯定是少不了的。我们是否真正去考虑过、设计过如何才能整一个漂亮的、高扩展性的路由。
可能很多开发者不以为然,认为路由嘛,不久是那么回事嘛,直接开撸就完事了,如果后期有什么需求,加什么页面,再随便加个路由,指向一个页面就行了。那么我可以很明确的告诉你,小项目这么干,可能问题不大,如果稍微大一点的项目,几百个路由的时候,你不做区分,不做规划,那么可能你自己都会看懵逼,整个路由混乱不堪。
可能我这么说,你们还是觉得没什么说服力,下面我来举一个实际的例子(我以ant-design为例),看看高扩展性的路由是如何设计的:
现在我们有登录页和注册页,此处暂停两分钟,请你思考一下,你会怎么来写这个路由?
下面来看看我的思考:
- 1.登录、注册都是和用户相关的,如何能在地址栏中体现出来
- 2.登录、注册都是在一个view中展示出来的,我们需要一个容器来承载这两个页面
- 3.后期还会添加忘记密码、重置密码等功能吗?如何才能优雅的融入?
{
path:'/user',
name:'user',
component:()=>
import("../layout/UserLayout.vue"),
children:[
{
path:'/user',
redirect:"/user/login",
},
{
path:"/user/login",
name:"login",
component: () =>
import("../views/User/Login.vue")
},
{
path:"/user/register",
name:"register",
component: () =>
import("../views/User/Register.vue")
},
//忘记密码
//重置密码
]
}
我们通过user来做识别,user下面的路由都是和用户相关的,UserLayout.vue作为一个容器,承载子组件,或者承载共有元素;我们希望展示的是登录页,所以利用重定向来实现。现在是不是看起来优雅多了,如果有一天,你接到通知,需要添加一个忘记密码,是不是......嗯,就不多说了。