vue重定向与别名

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, 
}