Vue-Router路由各种跳转、传参、小知识

发布网友发布时间：2024-09-15 09:47

我来回答

共1个回答

热心网友时间：2024-11-15 11:05

前言

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

一、安装

vue-cli安装

vueaddrouter

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

项目中会多一个

文件夹，内容如下：

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

二、基本路由使用

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

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

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

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

效果如下：

点击就能跳转.

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

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

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

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

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

三、嵌套路由(套娃)

效果图：

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

我们先加两个组件

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

constroutes=[{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这一个属性，就是和上级路由形成父子关系啦。套娃两层是这么套，那么套再多就是在里面接着写就完事了。

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

四、路由传参

效果

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

4.1、搭建基础环境

MessageItem组件

NewsItem组件

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

News组件

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

Message组件

<template><div><ul><liv-for="messageinmessages":key="message.id"><router-linkto="/item">{{message.id}}:{{message.title}}</router-link></li></ul><router-view></router-view></div></template><script>exportdefault{data(){return{messages:[{id:1,title:"001信息"},{id:2,title:"002信息"},{id:3,title:"003信息"}]}}}</script>4.2、query参数第一种：to的字符串写法

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

Message组件

<liv-for="messageinmessages":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的对象方法<liv-for="messageinmessages":key="message.id"><router-link:to="{path:'/item',query:{id:message.id,title:message.title}}">{{message.id}}:{{message.title}}</router-link></li>

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

4.3、params参数第一种：to的字符串写法

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

<router-linkto="/">Home</router-link>|<router-linkto="/about">About</router-link>|0<router-linkto="/">Home</router-link>|<router-linkto="/about">About</router-link>|1

接收的也稍稍有变化：

<router-linkto="/">Home</router-link>|<router-linkto="/about">About</router-link>|2第二种：to的对象写法<router-linkto="/">Home</router-link>|<router-linkto="/about">About</router-link>|3

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

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

我们思考一个问题哈。

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

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

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

1）props配置方式一：<router-linkto="/">Home</router-link>|<router-linkto="/about">About</router-link>|4

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

我们改一下接收的子组件

<template><div><p>消息编号：{{id}}</p><p>消息标题：{{title}}</p></div></template><script>exportdefault{props:['id','title']}</script>2）props配置方式二：

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

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

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

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

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

解构写法

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

更偷懒的就是连续解构：

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

果然是偷懒使人进步啊。

五、编程式路由5.1、编程式实现路由跳转

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

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

利用方法进行跳转

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

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

5.2、编程式控制前进后退

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

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

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

效果图：

六、缓存路由组件

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

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

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

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

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

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

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

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

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

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

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

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

deactivated路由组件失活时触发。