vue3中路由的使用（详细讲解）

1、路由的简介

路由(route)：就是根据特定的规则将数据包或请求从源地址传输到目标地址的过程。

在前端或者vue3项目中路由主要用于构建单页面应用程序（SPA），其中所有的页面都在同一个HTML文件中加载，通过JavaScript动态地切换显示不同的内容。

路由器（Router）：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。

请着重注意，路由器（Router）与路由（Route）的区别。路由器是用来管理路由的，你也可以理解为路由的集合。如果将一个一个的路由比作学生，那么路由器就是老师，负责管理所有的路由。在vue3项目中，路由是由路径和对应的组件构成的。我们通过切换不用的路径来展示不同的组件效果，路由器就是负责管理这些路径和路由对应的一些属性，来控制和管理路由的。

vue3中路由的官网为：
Vue Router | Vue.js 的官方路由

2、vue3项目中路由的基本使用

2.1导入路由对应的依赖（也可以选择在创建vue项目时直接导入）

1、下载vue-router的依赖

npm install vue-router@4

2、在src目录下新建一个router目录，在router目录下新建一个index.ts文件，在这个ts文件中实现路由的定义的管理(这个文件起到的作用相当于路由器)；我已经在components目录下新建了一些vue组件用来测试路由

import { createRouter, createWebHistory } from 'vue-router'
import LoginVue from '@/components/Login.vue'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'login',component: LoginVue},{path: '/user',name: 'user',component: () => import('@/components/User.vue') // 懒加载}]
})export default router

createRouter函数，新建一个路由器；

createWebHistory函数可以创建一个 HTML5 History 路由实例，从而能够支持浏览器的前进和后退按钮。

routes：存放一个一个的路由；在这里每一个路由都是一个对象，必须要指定的由两个参数：

path：指定路由的路径

component：指定路由对应的组件

也可以指定一些其他的属性，如name为路由命名、children设施嵌套路由等等，这些我们会在下面的内容中详细讲解；

3、在main.ts（或main.js）中引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)app.use(router)
app.mount('#app')

2.2实现路由的跳转

1、使用RouterLink标签实现路由导航

在根组件App.vue中实现我们接下来的操作：

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script><template><h1>App根组件</h1><RouterLink to="/login">login</RouterLink> 
<hr>
<RouterLink to="/user">user</RouterLink><!-- 路由展示区 --><RouterView />
</template><style scoped></style>

RouterLink标签会被渲染成一个 <a> 标签，点击它时会触发路由切换。

RouterView 标签是展示区，会根据当前路由的路径自动加载对应的组件，并将其渲染到页面中。

响应效果：

RouterLink标签与a标签的不同在于使用RouterLink标签进行路由切换时不会刷新页面，而是用a标签进行路由切换时会自动刷新页面；

使用a标签进行切换也是直接写路由对应的路径即可

<a href="/login">login</a>

RouterLink标签的to属性时是一定要写的，原始的to属性只能写路由的路径。但是你可以在to属性前加一个:冒号，将:to属性变为响应式。这样就可以进行更多的操作了。

我们在进行路由的切换时也可以使用路由的名称进行切换；

<RouterLink :to="{name:'login'}">login</RouterLink>

2、编程式路由导航

使用RouterLink标签也能实现路由的跳转，但是这种跳转方式毕竟是写死的。我们只能通过点击相应的按钮来实行路由跳转，接下来我们通过js编程式的方式来实行路由的跳转，这也是我们在vue项目开发中常用到的路由跳转方式。

1、在App.vue组件中导入useRouter函数(注意是useRouter而不是useRoute。useRouter是路由器，useRoute是路由)

import {useRouter} from 'vue-router'

2、定义一个属性router来接收useRouter函数

const router=useRouter()

3、定义一个方法，并定义按钮触发，来实现路由的跳转；

const getLogin=()=>{
router.push({name:'login'})
}

路由的跳转有两种形式：

replace和push。区别在于，前者会替换当前的历史记录，而后者会添加新的历史记录。使用 replace 形式的导航，可以避免在浏览器历史记录中留下多个相同的页面。

使用replace形式实现路由的跳转与push形式的方法是一样的，只不过是改个名称罢了：
 

const getLogin=()=>{
router.replace({name:'login'})
}

通过点击导航时，视觉效果上“消失”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

2.3嵌套路由和重定向

有时候，一个路由的渲染效果是不能达到我们的预期效果的，这时候我们就需要进行路由之间的嵌套。

通过配置路由对象的 children 字段来定义子路由。

我又定义了三个组件：Login1.vue、Login2.vue、Login11.vue

要实现的效果是，Login1.vue、Login2.vue这两个路由组件是Login.vue的子组件、Login11.vue是Login1.vue的子组件；

直接在index.ts路由器定义路由的时候，同时定义这个路由的子路由（如果又子路由的话）

const router = createRouter({history: createWebHistory(),routes: [{path: '/login',name: 'login',component: LoginVue,children: [{path:'login1',name:'login1',component:()=>import('@/views/Login1.vue'),children:[{path:'login11',name:'login11',component:()=>import('@/views/Login11.vue')}]},{path:'login2',name:'login2',component:()=>import('@/views/Login2.vue')}]},{path: '/user',name: 'user',component: () => import('@/components/User.vue') // 懒加载}]
})

可以看到我们直接在定义路由时，用children 属性就可以定义这个路由的子路由，并且children 是一个数组，这意味着我们可以定义多个子路由

注意，在子路由的 path 字段中，我们省略了斜杠 /，而使用了相对路径 'login1'、‘login2’、‘login11’等。这是因为在嵌套路由中，子路由的路径是相对于父级路由的。

虽然我们在路由器中定义了子路由，但是这个子路由默认是不会渲染的。接下来，我们需要确保在父级组件中添加 RouterView组件，以用于渲染子路由的内容。

父路由Login.vue：
 

<template><div><h2>login组件</h2>
<br>
<button @click="getLogin1">login1</button>
<button @click="getLogin2">login2</button>
<br>
<RouterView></RouterView></div>
</template><script lang="ts" setup>import {useRouter,RouterView} from 'vue-router'
const router=useRouter()
const getLogin1=()=>{
router.push({name:'login1'})
}
const getLogin2=()=>{
router.push({name:'login2'})
}</script><style  scoped></style>

最终实现的效果：

路由的重定向：

使用 redirect 字段将指定的路径重定向到另一个路径。

 path: '/login',name: 'login',component: LoginVue,redirect: '/login/login2',

这表示，我访问/login路径时，会自动重定向到/login/login2路径。

路由的懒加载：

路由的懒加载是一种优化技术，它可以延迟加载路由组件，提高应用的性能。通过懒加载，只有在需要渲染该路由时才会下载和加载对应的组件代码。

这种是正常加载，它会一次性的把所有的组件全部加载进来

import LoginVue from '@/components/Login.vue'component: LoginVue

这种是懒加载，只有在需要渲染该路由时才会下载和加载对应的组件代码。

 component: ()=>import('@/components/Login.vue')

2.4路由的传参

路由在进行跳转的时候可以进行参数的传递，你可以把要传递的参数给下一个路由来展示，这个功能是非常重要的我们在项目的开发中经常使用到这个特性；路由传参有两种方式；

2.4.1query参数

可以直接使用query来进行参数的传递，这是route封装好的专门用来传参的属性，我们可以直接进行使用；

在App.vue中进行路由参数的传递：

const getLogin=()=>{
router.push({name:'login',query:{name:'张三',age:18}
})
}

query是一个队象，你可以直接在这个对象中以键值对的形式传递参数；

在Login.vue中进行参数的接收：

使用useRoute来进行路由参数的接收；
 

 import {useRouter,useRoute} from 'vue-router'const route=useRoute()
console.log('接收传递的参数',route.query);

由于我们在进行传参时使用了路由的query参数，那么在接收参数时也要用query属性接收；

我们可以看一下控制台打印的效果：

可以看到我们已经接收到了由App.vue传递的参数了

2.4.2params参数

使用params也可以进行参数的传递，与query参数不同的是，使用params进行路由传参时，必须要在路由路径上进行占位才行，并且在进行路由跳转时不能使用path路径跳转，只能使用命名路由的形式跳转；

路径占位：

 path: '/login/:name/:age',name: 'login',component: ()=>import('@/components/Login.vue')

App.vue中进行路由传参：
 

const getLogin=()=>{
router.push({name:'login',
params:{
name:'李四',
age:20
},query:{name:'张三',age:18}
})
}

在Login.vue中进行参数的接收:

 import {useRouter,useRoute} from 'vue-router'const route=useRoute()
console.log('接收传递的参数query===>',route.query);
console.log('接收传递的参数params===>',route.params);

我们可以看一下控制台打印的效果：

还有一点要注意，使用params进行传参时，不能传递对象和数组形式。这是params的特性；

并且你在路径上进行占位的参数，params也一定要进行传递，不然会报错的。

要想不报错，可以在占位时在参数后加一个？表示不是必要的参数

 path: '/login/:name/:age?',name: 'login',component: ()=>import('@/components/Login.vue')

传递params参数时，必须使用name配置项，不能使用path，并且需要提前在规则中占位；

2.4.3props属性

props 属性可以用于在路由组件中传递数据。

当使用 props 属性进行路由传参时，传递的数据会以 props 的形式传递给目标组件，这样目标组件就可以直接通过 props 来使用传递的数据。

props常见有两种写法：

1、将路由接收到的params参数直接发送给组件

 path: '/login/:name/:age?',name: 'login',component: ()=>import('@/components/Login.vue'),props: true

这种写法适用于params传参方式，使用了props 属性，就相当于在进行路由跳转时直接把参数在路由组件种进行传递；

相当于：
 

<Login name=李四  age=20/>

可以直接在目标路由中使用defineProps进行接收

let {name,age}=defineProps(['name','age'])
console.log(name,'==>',age);

2、函数式写法，可以自己决定将什么作为props给路由组件

 path: '/login/:name/:age?',name: 'login',component: ()=>import('@/components/Login.vue'),props(router){return router.query}

接收效果与第一种方式一样；

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/234048.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端八股文（网络篇）一

前端八股文（网络篇）一

目录 1.Get和Post的请求的区别 2.常见的HTTP请求头和响应头 3.常见的HTTP请求方法 4.HTTP与HTTPS协议的区别 5.对keep-alive的理解 6.页面有多张图片&#xff0c;HTTP是怎样的加载表现&#xff1f; 7.HTTP请求报文是什么样的&#xff1f; 8.HTTP响应报文是什么样&#x…
阅读更多...
为什么大型服务器要用 Linux 系统？

为什么大型服务器要用 Linux 系统？

为什么大型服务器要用 Linux 系统&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「Linux的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff…
阅读更多...
STM32 ESP8266 物联网智能温室大棚 （附源码 PCB 原理图 设计文档）

STM32 ESP8266 物联网智能温室大棚 （附源码 PCB 原理图 设计文档）

资料下载: https://download.csdn.net/download/vvoennvv/88680924 一、概述 本系统以STM32F103C8T6单片机为主控芯片&#xff0c;采用相关传感器构建系统硬件电路。其中使用DHT11温湿度传感器对温度和湿度的采集&#xff0c;MQ-7一氧化碳传感器检测CO浓度&#xff0c;GP2Y101…
阅读更多...
[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-1 坐标系与概念基准

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-1 坐标系与概念基准

本文仅供学习使用&#xff0c;总结很多本现有讲述运动学或动力学书籍后的总结&#xff0c;从矢量的角度进行分析&#xff0c;方法比较传统&#xff0c;但更易理解&#xff0c;并且现有的看似抽象方法&#xff0c;两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…
阅读更多...
Python进阶之元类

Python进阶之元类

Python进阶之元类 目录 什么是元类&#xff1f; 元类的调用流程 根据类自定义元类 __new__方法以及参数 ----------cls ----------name ----------bases ----------attrs __call__方法 生成对象的完整代码 什么是元类&#xff1f; 在python面向对象中&#xff0c;我们知道所有…
阅读更多...
使用串口 DMA 模式接收不定长数据

使用串口 DMA 模式接收不定长数据

一、简介 曾经遇到客户有一个需求&#xff0c;需要用串口 DMA 的方式接收不定长度的数据&#xff0c;DMA 有个缺点就是在每次传输前需要设定好传输的字节长度&#xff0c;这种方式显然对于接收不定长度的数据来说没有那么灵活。但 DMA 也有着显著的优点&#xff0c;如可直接访…
阅读更多...
网络安全—部署CA证书服务器

网络安全—部署CA证书服务器

文章目录 网络拓扑安装步骤安装证书系统安装从属证书服务器 申请与颁发申请证书CA颁发证书 使用windows Server 2003环境 网络拓扑 两台服务器在同一网段即可&#xff0c;即能够互相ping通。 安装步骤 安装证书系统 首先我们对计算机名进行确认&#xff0c;安装了证书系统后我…
阅读更多...
(vue)el-cascader级联选择器实现单/多选最后一级并回显

(vue)el-cascader级联选择器实现单/多选最后一级并回显

(vue)el-cascader实现多选最后一级并回显 <el-form-item label"选择算法模型&#xff1a;"><el-cascaderv-model"formInline.algorithmId":options"modelOptions":props"{ value: id, label: name, multiple: true, emitPath: fal…
阅读更多...
002集filter()函数及lambda()函数应用实例—python基础入门实例

002集filter()函数及lambda()函数应用实例—python基础入门实例

1.filter()函数的基本语法如下&#xff1a; filter ( function , iterable ) 其中&#xff0c;function是一个用于判断的函数&#xff0c;iterable是一个可迭代对象&#xff0c;可以是列表、元组、集合或字符串等。filter()会将iterable中的每个元素依次传给function进行判…
阅读更多...
python编程使用selenium模拟登陆淘宝实例代码

python编程使用selenium模拟登陆淘宝实例代码

selenium简介 selenium 是一个web的自动化测试工具&#xff0c;不少学习功能自动化的同学开始首选selenium &#xff0c;相因为它相比QTP有诸多有点&#xff1a; * 免费&#xff0c;也不用再为破解QTP而大伤脑筋* 小巧&#xff0c;对于不同的语言它只是一个包而已&#xff0c…
阅读更多...
【win11 绕过TPM CPU硬件限制安装】

【win11 绕过TPM CPU硬件限制安装】

Qt编程指南 VX&#xff1a;hao541022348 ■ 下载iso文件■ 右键文件点击装载出现如下问题■ 绕过TPM CPU硬件限制安装方法■ 虚拟机安装win11 ■ 下载iso文件 选择Windows11 &#xff08;multi-edition ISO&#xff09;在选择中文 ■ 右键文件点击装载出现如下问题 ■ 绕过T…
阅读更多...
LINE网页版使用方法(内含LINE网页版特点总结）

LINE网页版使用方法(内含LINE网页版特点总结）

如果想要在电脑上使用LINE&#xff0c;但是又觉得下载客户端很累赘的话&#xff0c;LINE网页版是你最好的选择。但是LINE网页版相对于其他平台来说使用方式比较少。所以今天就来讲讲&#xff0c;我们有什么方式可以在电脑中使用LINE。 LINE网页版使用方法 1.需要使用Chrome浏览…
阅读更多...
作业--day42

作业--day42

界面设计 MyProWin::MyProWin(QWidget *parent): QMainWindow(parent) {/**********窗口主体**********///窗口大小this->setFixedSize(644, 493);this->setWindowTitle("QQ");this->setWindowIcon(QIcon("C:/Users/10988/Downloads/pictrue/pictrue/…
阅读更多...
java编程中，保证接口幂等性的实现方案讨论

java编程中，保证接口幂等性的实现方案讨论

一、什么是幂等性 数学中的幂等是指f(x) f(f(x))&#xff0c;编程领域的术语是指同一个操作&#xff0c;在重复提交的情况下&#xff0c;最终产生的影响是不变的。举例说&#xff1a; 提交订单时&#xff0c;用户在购物车界面&#xff0c;重复点击“下单”&#xff0c;服务端…
阅读更多...
摆动排序 II

摆动排序 II

题目链接 摆动排序 II 题目描述 注意点 将数组重新排列成 nums[0] < nums[1] > nums[2] < nums[3]… 的顺序题目数据保证&#xff0c;对于给定的输入 nums &#xff0c;总能产生满足题目要求的结果用 O(n) 时间复杂度和 / 或原地 O(1) 额外空间来实现 解答思路 如…
阅读更多...
学习笔记16——操作系统

学习笔记16——操作系统

学习笔记系列开头惯例发布一些寻亲消息&#xff0c;感谢关注&#xff01; 链接&#xff1a;https://www.mca.gov.cn/lljz/indexdetail.html?idd0afa7f6f36946319a206d61937f9b63&type0&t10.11199120579373845 八股——操作系统一些基础知识整理 一个java程序对应一个…
阅读更多...
FDA食品接触材料测试项目接触

FDA食品接触材料测试项目接触

1. FDA介绍&#xff1a; 美国食品和药品管理局&#xff08;FDA&#xff09;负责监管食品接触材料&#xff0c;此类材料必须经过检测&#xff0c;确保达到食品接触安全标准。美国联邦法规&#xff08;CFR&#xff09;第21章对此类材料作出具体规定&#xff0c;并将此类材料视…
阅读更多...
MATLAB读取图片并转换为二进制数据格式

MATLAB读取图片并转换为二进制数据格式

文章目录 前言一、MATLAB 文件读取方法1、文本文件读取2、二进制文件读取3、 图像文件读取4、其他文件读取 二、常用的图像处理标准图片链接三、MATLAB读取图片并转换为二进制数据格式1、matlab 源码2、运行结果 前言 本文记录使用 MATLAB 读取图片并转换为二进制数据格式的方…
阅读更多...
Selenium 学习（0.17）——软件测试之流程图绘制方法

Selenium 学习（0.17）——软件测试之流程图绘制方法

病假5天&#xff0c;出去野20天&#xff0c;成功错过了慕课网上的期末考试。 害&#xff0c;都怪玩乐太开心了…… 反正咱又不指着全靠这个行当来吃饭&#xff0c;错过也就错过了&#xff0c;立的Flag能抢救一下还是要抢救一下吧。【这个其实早都会画了&#xff0c;而且基本也正…
阅读更多...
软件测试|Linux三剑客之sed命令详解

软件测试|Linux三剑客之sed命令详解

简介 sed&#xff08;Stream Editor&#xff09;是一款流式文本编辑器&#xff0c;在 Linux 和类 Unix 系统中广泛使用。它的设计目的是用于对文本进行处理和转换&#xff0c;可以用于替换、删除、插入、打印等操作。sed 命令通过逐行处理文本&#xff0c;允许您使用简单的命令…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023