当前位置: > > > Vue.js - 路由 vue-router 的使用详解8(重定向、alias别名)

Vue.js - 路由 vue-router 的使用详解8(重定向、alias别名)

一、重定向

1,基本用法

(1)默认情况下,刚进入应用时都是进到“/”这个路由,我们可以通过重定向使得直接进入到“/step2
import Vue from 'vue'
import Router from 'vue-router'
import step1 from '@/components/step1'
import step2 from '@/components/step2'
import step3 from '@/components/step3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1,
      redirect: '/step2'
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2
    },
    {
      path: '/step3',
      name: 'step3',
      component: step3
    }
  ]
})

(2)可以看到一进来就直接跳转到“/step2

2,重定向时可以传递参数

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1,
      redirect: '/step2/:userId(\\d+)/:token'
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2
    }
  ]
})

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

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1,
      redirect: { name: 'step2' }
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2
    }
  ]
})

4,动态返回重定向目标

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1,
      redirect: to => {
        return "/step2"
      }
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2
    }
  ]
})

二、alias 别名

1,基本用法

(1)我们可以在路由配置文件里给路径起一个别名。
export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2,
      alias:'/alias2'
    }
  ]
})

(2)接着我们就可以使用这个别名来访问这个路由路径。
<router-link to="/alias2">下一步</router-link>

(3)可以看到不管是“/step2”还是“/alias2”,它们访问的结果都是一样的。

2,每个路径可以同时配置多个别名

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2,
      alias: ['/alias2', '/hangge']
    }
  ]
})

3,重定向到别名上

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1,
      redirect: '/alias2'
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2,
      alias: '/alias2'
    }
  ]
})
评论0