命名路由
有时候,通过一个名称来表示一个路由显得更方便一些,特别是在连接一个路由,或者是执行一些跳转的时候。可以在创建 router
实例的时候,在 routes
配置中给某个路由设置名称。
consy router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由,可以给 router-link
的 to
属性传一个对象:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
命名视图
有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar
(侧导航)和 main
(主内容)两个视图,这个时候命名视图就派上用场了,可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view
没有设置名字,那么默认为 default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上s):
const router = new VueRouter({
routes:[
{
path:'/',
components:{
default: Foo,
a: Bar,
b: Baz
}
}
]
代码:
<body>
<div id="app">
<div class="header">
<router-view name="header"></router-view>
</div>
<div class="body">
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<div class="footer">
<router-view name="footer"></router-view>
</div>
</div>
</body>
<script>
headerc = Vue.extend({template:"<h1>header部分</h1>"})
leftc = Vue.extend({template:"<h1>leftc部分</h1>"})
rightc = Vue.extend({template:"<h1>rightc部分</h1>"})
footerc = Vue.extend({template:"<h1>footerc部分</h1>"})
var router = new VueRouter({
routes: [
{path:"/", components:{
header:headerc,
left: leftc,
right: rightc,
footer: footerc,
}}
]
})
new Vue({
el: "#app",
router:router
})
</script>
重定向和别名
重定向也是通过 router
配置来完成,下面例子是从 /a
重定向到 /b
:
const router = new VueRouter({
routes:[
{path: '/a', redirect:'/b'}
]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes:[
{path: '/a', redirect:{name: 'foo' }}
]
})
```重定向的意思是,当用户访问 /a
时,url
将会被替换成 /b
, 然后匹配路由为/b
, 那么 “别名”又是什么呢? /a
的别名是 /b
,以为着,当用户访问 /b
时,url
会保持为 /b
,但是路由匹配则为 /a
,就像用户访问 /a
一样。路由配置为:
const router = new VueRouter({
routes:[
{path: '/a', redirect:A, alias: '/b'}
]
})