Vue(六)——vue-router(重定向与别名)_$router 重定向__Jyann_的博客

1.1案例（需求）

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

1.2组件

//App.Vue
<template>
  <div id="app">
    <h1>vue-router</h1>
    <div id="nav">
      <router-link to="/">Home</router-link> | 
      <router-link to="/about">About</router-link> | 
      <router-link to="/user">User</router-link> |  
      <router-link to="/bookType">BookType</router-link> 
    <!-- 显示主页 -->
    <router-view></router-view>
</template>

通过localStorage和beforeRouteLeave两种方式实现重定向：

// BookType.vue
<template>
    <router-link :to="{name: 'bookBoy'}">男频</router-link>|
    <router-link :to="{name: 'bookGirl'}">女频</router-link>
</template>
<script>
export default {
  name: "BookType",
  // 方法一：通过生命周期实现
  // 通过localStorage决定跳转到哪个频道
  beforeRouteEnter(to, from, next) {
        let bookType = localStorage.getItem('book-type');
        if (  ['bookBoy', 'bookGirl'].includes(bookType) ) {
            // this.$router.push({name: bookType})
            next(vm => {
                vm.$router.push({name: bookType})
        } else {
            next();
// 方法二：通过组件内守卫实现
  // beforeRouteLeave(to, from, next) {
  //   let bookType = to.name;
  //   console.log(bookType);
  //   if (["bookBoy", "bookGirl"].includes(bookType)) {
  //     // 记录当前的路由名称
  //     localStorage.setItem("book-type", bookType);
  //   }
  //   next();
</script>
<style>
</style>

// BookBoy.vue
<template>
</template>
<script>
export default {
    name: 'BookBoy',
    created(){
      // 点击频道后，首先记录点击动作到localStorage
      localStorage.setItem("book-type","bookBoy");
</script>

// BookGirl.vue
<template>
</template>
<script>
export default {
    name: 'BookGirl',
     created(){
      // 点击频道后，首先记录点击动作到localStorage
      localStorage.setItem("book-type","bookGirl");
</script>

1.3路由配置

注意：导航时使用/bookType，当已选择过book-type时会直接返回已有的booktype;

当没有选择过时返回默认的book路由，此时会直接导航至bookType.Vue组件

//route.js
 // 书城
            name: "bookType",
            path: '/BookType',
            redirect: to => {
                //作为中间男女频跳转的媒介，没有真正的Book模板
                let type = localStorage.getItem("book-type");
                console.log(type)
                return { name: type || "book" };
            // 第一次进入书城，在没有选择男频女频前，需要点击bookType就链接到全频书城,
            // 但是在BookType路由中，如果直接写 return { name: type || "bookType" };自己再次路由到自己就会报错，所以需要设置第三方中介路由
            name: 'book',
            path: '/Book',
            // component: BookType
            component: () =>
                import ('@/components/book/BookType.vue'),
            name: "bookBoy",
            path: '/BookBoy',
            // component: BookBoy,
            component: () =>
                import ('@/components/book/BookBoy.vue')
            name: "bookGirl",
            path: '/BookGirl',
            // component: BookGirl,
            component: () =>
                import ('@/components/book/BookGirl.vue')
重定向，是从一个路由切换到另外一个路由，而别名是不同的路由显示同一个页面，比如：/user 是用户中心的路由，/member ，我们也可以给这个页面定义另外一个路由，虽然在某些时候，重定向与别名有类似的效果，但是，别名不存在跳转，浏览器地址栏上显示的 URL 并不会切换 
  path: '/user',
  alias: '/member'
  component: User, 
三、404 
// 错误页面
import NotFound from '@/components/NotFound.vue'
  path: '*',
  component: NotFound
//NotFound.vue
<template>
    此页面不存在！！！
</template>
<script>
export default {
    name: "NotFound"
</script> 
二、路由别名（就是给这个路由起了个名字，访问这个路由的时候不需要访问path 而是访问alias后面的）
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：
const router = new VueRouter({
 routes: [
  { path: '/a', component: A, alias: '/
路由重定向redirect
路由重定向：一般用在不同的页面跳转到同一个页面或是同一组件的情况。
这时需要用到的是redirect参数，将要跳转的页面路径添加到redirect参数后。
在路由重定向时，有两种情况：
1.不携带参数进行路由重定向
例子：demo2页面重定向到demo页面
在src/router/index.js文件下增加demo2路由，这时不需要写compon...
                                    在router下的index.js配置路由时，有时候，配置不同的路由，但是，希望跳转到同一个页面，这个时候就需要使用redirect进行重定向，这样，就可以跳转到同一个页面。
普通的重定向(不需要传递任何的参数):
export default new Router({
  routes: [
      path: '/',
      name: 'HelloWorld',
有的时候，我们会根据某种需求对用户请求的页面进行重新定位
现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道
// BookChoose.vue
<template>
        <router-link :to="{name: 'book
                                    console.log(this.$route.path);
if(this.$route.path==="/"){
  this.$router.push({ path: '/library'});
                                    一.vue-router的重定向-redirect
有时候设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
redirect基本重定向
我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。
export defa...
                                    Vue-Router
什么是路由？
路由是根据不同的url地址展现不同的内容或页面。早期的路由都是后端直接根据url来重载页面实现的，即后端控制路由。后来页面越来越复杂，服务器压力越来越大，随着ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。
什么时候使用前端路由？
前端路由更多用在单页应用上，也就是SPA(Single Page W...
                                    vue跳转路径时怎么进行参数传递
参考：https://router.vuejs.org/zh/guide/essentials/passing-props.html
index.js路由js配置参数：
import Vue from 'vue'
import Router from 'vue-router'
import Main from "../views/Main"
import Login from "../views/Login"
import UserList from "..
注意：router-link中，链接如果是’/'开头则表示从根路由开始；如果开头不带‘/’，则从当前路由开始。
（1）不带参数
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}">
（2）带参数
<router-link :to="{name:'home', params: {id:1}}">  
// params传参数 (类似post)