「后端小伙伴来学前端了」Vue-Router 路由各种跳转、传参、小知识

前言

学完Vuex方面的操作就该来学学Vue中的路由操作了.... xdm冲

一、安装

vue-cli 安装

vue add router

做完这一步基础环境都搭好了。

项目中会多一个

文件夹，内容如下：

最后暴露出来，在mian.js 中引用进去就可以了。暂时先不细讲。

二、基本路由使用

基本路由使用，其实你安装完就已经有例子啦。

在App组件中有下面这两行代码，其实就路由跳转的意思。

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |

我们以前是用a标签，这里只是帮我们封装了。这里配置好的/及/about都是router文件夹下配置好的路由规则，每个路径和哪个组件相对应。

效果如下：

点击就能跳转.

这是最基础的,看看就完事了,因为咱们使用这种方式挺少的,基本上在路由跳转的过程中都是要做很多事情的.

但是大家发现了没有，只有内容变了，为啥呢？

因为app组件中 <router-view/> 这个代码，意思就是切换路由时，将组件内容放到这里展示。

这最基本的，大家随便玩玩都会的，咱们不多说。

问个小问题，这个路由跳转的过程中，原来的哪个组件是被隐藏了，还是销毁了呢？？？

三、嵌套路由(套娃)

效果图：

asdadawsd

就是在home和about下分别来个路由，也非常容易。

我们先加两个组件

我们再router中进行配置一下。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children: [
      {
        path: '/news',
        name: 'news',
        component: () => import(/* webpackChunkName: "about" */ '../components/News.vue'),
      },
    ]
  }
]

其实也就牵扯到children这一个属性，就是和上级路由形成父子关系啦。套娃两层是这么套，那么套再多就是在里面接着写就完事了。

一次套娃一次爽，一直套娃一直爽

四、路由传参

效果

qweqewrwrw

我们再加一个两个子路由，在里面实现路由传参。另外把原来的组件改一下。

4.1、搭建基础环境

MessageItem组件

<template>
  <div>
    <p>消息编号：???<//p>
    <p>消息标题：???<//p>
  </div>
</template>

NewsItem组件

<template>
  <div>
    <p>新闻编号：???</p>
    <p>新闻标题：???</p>
  </div>
</template>
<script>

这里的??？是稍后用来接收路由传参的哈。

News组件

<template>
  <div>
    <ul>
      <li v-for="newItem in news" :key="newItem.id">
        <router-link to="/item">{{newItem.id}}:{{newItem.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data(){
    return {
      news:[
        {id:1, title:"001新闻"},
        {id:2, title:"002新闻"},
        {id:3, title:"003新闻"}
      ]
    }
  }
}
</script>

Message组件

<template>
  <div>
      <ul>
      <li v-for="message in messages" :key="message.id">
        <router-link to="/item">{{message.id}}:{{message.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
    data(){
    return {
      messages:[
        {id:1, title:"001信息"},
        {id:2, title:"002信息"},
        {id:3, title:"003信息"}
      ]
    }
  }
}
</script>

4.2、query参数

第一种：to 的字符串写法

URL传参，组件用$route.query 取值

Message组件

<li v-for="message in messages" :key="message.id">
    <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link>
</li>

注意这里的 to前面是加了引号的，并且中间的内容也是用 `符号修饰的

MessageItem组件

<div>
    <p>消息编号：{{$route.query.id }}</p>
    <p>消息标题：{{$route.query.title }}</p>
</div>

第二种：to的对象方法

      <li v-for="message in messages" :key="message.id">
        <!-- to的字符串写法 -->
        <!-- <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link> -->

        <!-- to的对象写法 -->
        <router-link :to="{
          path: '/item',
          query: {
            id: message.id,
            title: message.title
          }
        }">{{message.id}}:{{message.title}}</router-link>
      </li>

另外一边接收的方式还是同上。

4.3、params参数

第一种：to的字符串写法

跳转链接还是差不多的，但是必须在路由规则中进行配置

<router-link :to="`/item/${message.id}/${message.title}`">{{message.id}}:{{message.title}}</router-link>

  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
        children: [
          {
            path: '/item/:id/:title', // 使用占位符声明接收params参数
            name: 'messageItem',
            component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue')
          }
        ]
      }
    ]
  },

接收的也稍稍有变化：

<p>消息编号：{{$route.params.id }}</p>
<p>消息标题：{{$route.params.title }}</p>

第二种：to的对象写法

<!-- to的对象写法 -->
<router-link 
   :to="{
         name: 'messageItem',
         params:{
                 id:message.id,
                 title: message.title
                }
          }">
    {{message.id}}:{{message.title}}</router-link>

注意：这里必须用 name ，即配置好的路由名称，不能够使用路由路径。

4.4、路由的props配置（偷懒的好工具）

我们思考一个问题哈。

你有没有觉得{{$route.params.id }}或者{{$route.params.title }} 这样子去取一个路由传过来的值，十分重复呢？？？

取每个值，都还要写一遍$route.params 或者是$this.query这个前缀，有没有觉得十分重复，那么有没有更简单的呢？

（一个两个还是简单的，万一有天传的多了，这个props肯定是能偷懒的哈🐥）

1）props配置方式一：

{
    path: '/',
        name: 'Home',
            component: Home,
                children: [
                    {
                        path: '/message',
                        name: 'message',
                        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
                        children: [
                            {
                                path: '/item/:id/:title',
                                name: 'messageItem',
                                component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),
      //第一种方式：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给MessageItem组件
                                props:true
                            }
                        ]
                    }
                ]
},

传递 params 参数的父组件啥都不用改，

我们改一下接收的子组件

<template>
<div>
    <!-- <p>消息编号：{{$route.query.id }}</p>
<p>消息标题：{{$route.query.title }}</p> -->
    <!-- <p>消息编号：{{$route.params.id }}</p>
<p>消息标题：{{$route.params.title }}</p> -->
    <!-- 通过props 接收 -->
    <p>消息编号：{{id }}</p>
    <p>消息标题：{{title }}</p>
    </div>
</template>
<script>
    export default {
        props:['id','title']
    }
</script>

2）props配置方式二：

思考一下，上面的那个方法只能解决传递params参数时进行缩写，那么如果是传递query参数方式该怎么办呢？

props 配置其实可以改成一个函数的哈

注意：记得在练习的时候，

{
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
        children: [
          {
            path: '/item',
            name: 'messageItem',
            component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),
            // props:true
            //第二种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给MessageItem组件
            props($route) {
              return {
                id: $route.query.id,
                title: $route.query.title
              }
            }
          }
        ]
      }
    ]
  },

想接收什么，我们就是在这边写啥就完事了，到了子组件，就是直接用了。

解构写法

props({query}) {
    return {
        id: query.id,
        title: query.title
    }
}

更偷懒的就是连续解构：

props({query:{id,title}}) {
    return {id,title}
}

果然是偷懒使人进步啊。

五、编程式路由

5.1、编程式实现路由跳转

之前我们都是借助 <router-link to="/news">新闻</router-link> 这个来实现路由的跳转，但实际开发中都是通过点击按钮或者是触发什么事件，然后才进行跳转的，所以使用router-link并不是特别合适。才有了编程式路由。

      <li v-for="message in messages" :key="message.id">
        <router-link
          :to="{
            path: '/item',
            query: {
              id: message.id,
              title: message.title,
            },
          }"
        >
          {{ message.id }}:{{ message.title }}</router-link
        >
        |
        <button type="button" @click="showMessageItem( message.id, message.title,)">
          点击跳转到{{ message.title }}页面
        </button>
      </li>

利用方法进行跳转

methods: {
    showMessageItem(id,title){
        this.$router.push(
            {
                path: '/item',
                query: {
                    id: id,
                    title:title
                }
            })
    }
}

如果是params 也是和之前一样的；

showPamarsMessageItem(id,title){
    this.$router.push(
        {
            name: 'messageItem',
            params: {
                id: id,
                title:title
            }
        })
}

相关的信息也要改哈，路由中配置的props啥的。

5.2、编程式控制前进后退

对于浏览器中的前进后退按钮，我们大家肯定是不陌生哈。

其实这个也是可以用编程式的方式来实现的。

<template>
  <div id="app">
    <button id="back" @click="back">后退</button> | 
    <button id="forward" @click="forward">前进</button> |
    <button id="forward" @click="go">go</button>

    <div id="nav" >
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {
    back(){
      console.log(this.$router)
      this.$router.back()
    },
    forward(){
      this.$router.forward()
    },
    go(){
      //直接说这个go () 的参数是一个数字 ，正数就是前进多少步，
      // 负数就是回退多少步。
      this.$router.go(2)
    }
  }
}
</script>

其实都是通过$router上的api来实现的，但是如果是无痕状态下，还是无法实现的，因为这些实现还是需要依靠浏览器的历史记录的。

效果图：

QQ录屏20211128153006

六、缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁。

我们在MessageItem组件中写上一个beforeDestroy销毁之前的钩子函数

<template>
  <div>
    <p>消息编号：{{ id }}</p>
    <p>消息标题：{{ title }}</p>
  </div>
</template>
<script>
export default {
  name: 'MessageItem',
  props:['id','title'],
  beforeDestroy(){
    console.log('MessageItem组件被销毁了')
  }
}
</script>

当我们从MessageItem组件切换到其他页面时，就会打印出这个。

但是如果我们在使用他的父组件身上改成下面这样的。

<keep-alive include="MessageItem"> 
    <router-view></router-view>
</keep-alive>

注意:include中写的是组件名。组件名。组件名。

如果不写include，是默认全部都缓存，不销毁。

这样写就会保证MessageItem在切换的过程中不会被销毁。

如果切换的异常频繁的话，我觉得加上这个还是可以的。

七、两个新的生命周期钩子函数

在第六小节，我们可以把组件进行缓存，但是同时也会造车组件的beforeDestroy生命周期钩子函数失效。

那么有些清除操作将会没法执行（如切换路由，让定时器暂停），所以就有了两个路由的独有的生命周期钩子函数。

activated路由组件被激活时触发。
deactivated路由组件失活时触发。

activated(){
    console.log('MessageItem被激活了')
},
    deactivated(){
        console.log('MessageItem失活了')
    }

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感谢。

纸上得来终觉浅，绝知此事要躬行。
大家好，我是博主宁在春：主页
一名喜欢文艺却踏上编程这条道路的小青年。

谢谢你，能够看到这里。