1.重定向
可以造成一个URL,对应多个不同的组件
案例
现有一小说网站,提供了 <u>男生频道</u> 和 <u>女生频道</u> 的两个入口,用户首次进入页面的时候,会出现选择,并记住用户的选择,以后该用户进入网站直接根据记录的选择进入对应的频道
组件
// BookChoose.vue
<template>
<div>
<router-link :to="{name: 'book-boy'}">男生</router-link>
<span> | </span>
<router-link :to="{name: 'book-girl'}">女生</router-link>
</div>
</template>
男生频道
// BookBoy.vue
<template>
<div>
BookBoy
</div>
</template>
<script>
export default {
name: 'BookBoy',
created() {
localStorage.setItem('book-type', 'book-boy');
}
}
</script>
女生频道
// BookGirl.vue
<template>
<div>
BookGirl
</div>
</template>
<script>
export default {
name: 'BookGirl',
created() {
localStorage.setItem('book-type', 'book-girl');
}
}
</script>
路由配置
{
path: '/book',
name: 'book',
// redirect: { name: 'book-choose' }
redirect: to => {
let type = localStorage.getItem('book-type')
return { name: type || 'book-choose' }
}
},
{
path: '/book-choose',
name: 'book-choose',
component: BookChoose
},
{
path: '/book-boy',
name: 'book-boy',
component: BookBoy
},
{
path: '/book-girl',
name: 'book-girl',
component: BookGirl
}
2.别名
可以造成多个URL,对应同一个组件
重定向,是从一个路由切换到另外一个路由,而别名是不同的路由显示同一个页面,比如:`/user` 是用户中心的路由,`/member` ,我们也可以给这个页面定义另外一个路由,虽然在某些时候,重定向与别名有类似的效果,但是,别名不存在跳转,浏览器地址栏上显示的 <u>URL</u> 并不会切换
{
path: '/user',
alias: '/member'
component: User,
}