Vue（路由）8.重定向与别名

vue-router

重定向

有的时候，我们会根据某种需求对用户请求的页面进行重新定位

案例

现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道

组件

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

别名

重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，比如：/user 是用户中心的路由，/member ，我们也可以给这个页面定义另外一个路由，虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上显示的 URL 并不会切换

{ 
  path: '/user',
  alias: '/member'
  component: User, 
}

404

{
  path: '*',
  component: NotFound
}

写在最后