- 重定向
- 别名
- 命名式路由
重定向
从当前页面跳转到别的页面——也可以说,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b
通过 routes 配置 redirect 选项
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
<script>
const foo = {
template: `<div>
<router-link to='/foo/fe'>foo-fe</router-link>
<router-link to='/foo/be'>foo-be</router-link>
<router-view></router-view>
</div >
`
};
var router = new VueRouter({
routes: [
{
path: '/bar',
component: {
template: '<div>bar page</div>'
}
}, {
path: '/foo',
//重定向到/foo/fe
redirect: "/foo/fe",
component: foo,
children: [
{
//相对路径方式
path: 'fe',
component: {
template: '<div>foo-fe page</div>'
}
}
, {
//绝对路径方式
path: '/foo/be',
component: {
template: '<div>foo-be page</div>'
}
}
]
}
]
})
var vm = new Vue({
router,
el: "#app"
})
</script>
初始界面:
当点击go to foo 时,发生重定向 地址跳转到 /foo/fe 页面,下图可以看出。
别名
别名可以理解为:如果/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
别名和重定向的区别在于url ,重定向的url会改变,别名的url 会保持。
通过 routes 配置 alias 选项设置
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
<script>
//用别名 alias 试试
const foo = {
//使用时可直接用 alias
template: `<div>
<router-link to='/fooSonB'>foo-fe</router-link>
<router-link to='/fooSonG'>foo-be</router-link>
<router-view></router-view>
</div >
`
};
var router = new VueRouter({
routes: [
{
path: '/bar',
component: {
template: '<div>bar page</div>'
}
}, {
path: '/foo',
redirect: "/fooSonB",
component: foo,
children: [
{
//相对路径方式
path: 'fe',
// alias 设置
alias:'/fooSonB',
component: {
template: '<div>foo-fe page</div>'
}
}
, {
//绝对路径方式
path: '/foo/be',
alias:'/fooSonG',
component: {
template: '<div>foo-be page</div>'
}
}
]
}
]
})
var vm = new Vue({
router,
el: "#app"
})
</script>
运行结果:
可以看到地址栏的 url 中使用的时别名alias
命名路由
总觉得别名和命名路由作用有点相似,也有点混乱,所以这里对比一下。
命名路由的出现 是通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。
通过 routes 配置 name 选项设置
<script>
const foo = {
//命名路由用法
template: `<div>
<router-link :to='{ name: "fooSonB"}'>foo-fe</router-link>
<router-link :to='{ name: "fooSonG",params:{id:123}}'>foo-be</router-link>
<router-view></router-view>
</div >
`
};
var router = new VueRouter({
routes: [
{
path: '/bar',
component: {
template: '<div>bar page</div>'
}
}, {
path: '/foo',
//使用命名路由
redirect:{ name: "fooSonB"},
component: foo,
children: [
{
//相对路径方式
path: 'fe',
//命名路由
name:'fooSonB',
component: {
template: '<div>foo-fe page</div>'
}
}
, {
//绝对路径方式
path: '/foo/be/:id',
//命名路由 ---动态路由
name:'fooSonG',
component: {
template: '<div>foo-be page----{{$route.params.id}}</div>'
}
}
]
}
]
})
var vm = new Vue({
router,
el: "#app",
})
</script>
运行结果:
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。
命名路由通过一个名称来标识一个路由,多用在编程式导航中用。