重定向和别名

重定向

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b

  1. const router = new VueRouter({
  2. routes: [
  3. { path: '/a', redirect: '/b' }
  4. ]
  5. })

重定向的目标也可以是一个命名的路由:

  1. const router = new VueRouter({
  2. routes: [
  3. { path: '/a', redirect: { name: 'foo' }}
  4. ]
  5. })

甚至是一个方法,动态返回重定向目标:

  1. const router = new VueRouter({
  2. routes: [
  3. { path: '/a', redirect: to => {
  4. // 方法接收 目标路由 作为参数
  5. // return 重定向的 字符串路径/路径对象
  6. }}
  7. ]
  8. })

注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 /a 路由添加一个 beforeEnter 守卫并不会有任何效果。

其它高级用法,请参考例子重定向和别名 - 图1

别名

“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么“别名”又是什么呢?

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

上面对应的路由配置为:

  1. const router = new VueRouter({
  2. routes: [
  3. { path: '/a', component: A, alias: '/b' }
  4. ]
  5. })

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

更多高级用法,请查看例子重定向和别名 - 图2