vue-router
文章目录
vue-router重定向案例组件路由配置
别名404
重定向
有的时候，我们会根据某种需求对用户请求的页面进行重新定位
案例
现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道
组件
// 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
: 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
}
别名
重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，比如：/user 是用户中心的路由，/member ，我们也可以给这个页面定义另外一个路由，虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上显示的 URL 并不会切换
{
path
: '/user',
alias
: '/member'
component
: User
,
}
404
{
path
: '*',
component
: NotFound
}
写在最后
