redirect路由配置 vue_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)接着我们就可以使用这个别名来访问这个路由路径。

下一步

(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'

}

]

})