vue-Router路由别名使用技巧

何为路由别名?
如果你选择查看别人的博客或者文档,很快你能得出这样的结论.

/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。

上面对应的路由配置为

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

似乎很好理解,为两个不同的URL匹配相同的组件,可是这有什么使用场景呢?

在我们单页面应用的开发场景中,经常会有这样的页面布局

布局已经写好,我们所有的业务模块开发都在右边的主体main中进行,接到需求后你也很快沿着业务流程写了几个页面.

可这个时候产品告诉你,按着这个流程下一步来到这样一个页面

头部还有侧边都不要了,就中间显示这个

可是你已经顺着业务嵌套几层路由了,但也难不倒对router早已了若指掌的你,大不了重开一个顶层路由脱离这个布局嘛
可这么干会有些不好的影响

1. RUL会变得很难看,原本应该是home/aboot/detail/xx的路径变成了home/xx
2. 路由模块会变得不符合原本的业务模块,本来都从属于about之下,当现在又开了一个顶层路由

于是我们就可以使用别名来解决这种情况

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

routes: [
    { path: '/root', component: Root, alias: '/root-alias' },
    { path: '/about', component: Home,
      children: [
        { path: 'detail', component: Nested,
          children: [
            { path: '/home/xx', component: NestedFoo, alias:'/home/aboot/detail/xx'}
          ]
        }
      ]
    }
  ]

so: 别名的核心就在于我们可以自由的在嵌套路由中使用不同的UI结构,跳出原有的结构嵌套