Vue3:路由

1. 路由简介

在Vue3中,路由是一个核心概念,特别是在构建单页面应用程序(SPA)时。以下是Vue3中路由的基本概念:

1. **路由(Route)**:在Vue3中,路由是指根据特定的规则将用户请求从源地址(URL)映射到目标组件(或页面)的过程。通过定义路由规则,我们可以将不同的URL映射到相应的组件,实现页面的切换效果。
2. **路由器(Router)**:路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。你可以将路由器视为一个中央控制器,负责管理所有的路由。在Vue3项目中,路由器是由路径和对应的组件构成的。我们通过切换不同的路径来展示不同的组件效果。
3. **前端路由**:在Vue3中,前端路由主要用于单页面应用程序(SPA)。在这种应用中,所有的页面都在同一个HTML文件中加载,通过JavaScript动态地切换显示不同的内容。前端路由的实现方式主要是通过监听URL的变化(如hash或history模式),然后根据这些变化来渲染相应的组件。
4. **嵌套路由**:Vue Router支持嵌套路由,这意味着你可以在父路由下定义子路由,实现复杂的页面结构。例如,你可以在一个用户页面的路由下定义用户详情、用户设置等子路由。
5. **路由守卫**:Vue Router提供了路由守卫(beforeEach、beforeResolve、afterEach等),这些守卫可以在路由切换前后执行相应的逻辑,例如权限验证、路由拦截等。

总的来说,Vue3中的路由是一个强大的工具,它可以帮助我们构建出结构清晰、易于维护的单页面应用程序。通过合理地定义和使用路由,我们可以实现页面之间的流畅切换,提升用户体验。

2. HelloWorld 

入门案列,实现在同一个页面中使某个部分进行组件切换

 

 组件准备

Add组件 

<script setup>
</script><template><div><h1>Add</h1><router-link to="list">list页</router-link></div>
</template><style scoped></style>

 Home组件

<script setup>
</script><template><div><h1>Home</h1></div>
</template><style scoped></style>

 Inert组件 

<script setup>
</script><template><div><h1>Home</h1></div>
</template><style scoped></style>

 List组件

<script setup>
</script><template><div><h1>List</h1></div>
</template><style scoped></style>

 App组件

<script setup>
</script><template><div>APP顶部<hr><router-link to="home">home页</router-link> <br><router-link to="list">list页</router-link> <br><router-link to="add">add页</router-link> <br><router-link to="inert">inert页</router-link> <hr>默认展示位置:<router-view></router-view><hr>APP底部 <br><hr>Home视图展示:<router-view name="HomeView"></router-view> <hr>List视图展示:<router-view name="ListView"></router-view> <hr>Inert视图展示:<router-view name="InertView"></router-view> <hr>Add视图展示:<router-view name="AddView"></router-view> <hr></div>
</template><style scoped></style>

 routers配置

//导入创建路由对象的函数
import {createRouter, createWebHistory} from 'vue-router'//导入.vue组件
import Home from '../components/Home.vue'
import Add from '../components/Add.vue'
import Inert from '../components/Inert.vue'
import List from '../components/List.vue'//通过函数创建路由对象
const router = createRouter({//history属性用于记录路由的历史(固定写法,用函数创建个history对象即可)history:createWebHistory(),//用于定义不同路径和多个组件的对应关系routes:[{path:'/home',components:{//没有指定名称的router-view组件上默认显示该路径内容default:Home,//指定的router-view组件上显示该路径的内容HomeView:Home}},{path:'/add',components:{AddView:Add}},{path:'/inert',components:{InertView:Inert}}, {path:'/list',components:{ListView:List}},{path:"/",component:Home},//路由重定向{path:"/show",redirect:"/list"}]
})//对外暴露
export default router

 main.js引入路由配置文件

import { createApp } from 'vue'import App from './App.vue'//导入router模块
import router from './routers/router.js'const app = createApp(App)//绑定路由对象
app.use(router)
app.mount('#app')

 3. 编程式路由(useRouter)

普通路由:

 <router-link to="/home">Home</router-link> 该路由路径由to定义,此时只能跳转到home页

编程式路由:

* 通过useRouter,动态决定向那个组件切换的路由
* 在 Vue 3 和 Vue Router 4 中,你可以使用 `useRouter` 来实现动态路由(编程式路由)
* 这里的 `useRouter` 方法返回的是一个 router 对象,你可以用它来做如导航到新页面、返回上一页面等操作。 

案例需求: 通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签 

<script setup>
//导入修改路由路径的函数
import {useRouter} from 'vue-router'
import {ref} from 'vue'//创建动态路由对象
const router = useRouter()//创建接收文本框信息的变量
let myPath = ref("")
function myPage() {//通过动态路由对象修改路径router.push(myPath.value)
}</script><template><div><!--声明式路由--><router-link to="/home">Home</router-link> <br><router-link to="/add">Add</router-link> <br><router-link to="/list">List</router-link> <br><router-link to="/update">Update</router-link> <br><!--编程式路由--><button @click="myPage()">GO</button><input type="text" v-model="myPath"> <hr><hr><router-view></router-view></div>
</template><style scoped></style>

 4. 路由传参(useRoute)

路径参数

在url中使用动态字段实现传递参数称为

如:/home/id/language 此时id和language两个字段的内容可以动态变化的,这两个字段值就是传递的参数

键值对参数

类似于get请求中的url,参数是键值对形式的

如:/home?id=value&language=java

<script setup>import {useRouter} from 'vue-router'//获取路由对象
const router = useRouter()function showDetail(id, language) {//路径传参//router.push(`/showDetail/${id}/${language}`)router.push({path:`/showDetail/${id}/${language}`})
}function showDetail2(id, language) {router.push(`/showDetail2?id=${id}&language=${language}`)
}</script><template><div><router-link to="/showDetail/1/java">声明式路由路径传参</router-link> <br><button @click="showDetail(0, 'C++')">编程式路由路径传参</button> <hr><router-link to="/showDetail2?id=3&language=python">声明式路由键值对传参</router-link> <br><router-link v-bind:to="{path:'showDetail2', query:{id:4, language:'GO'}}">声明式路由键值对传参</router-link><button @click="showDetail2(5, 'PHP')">编程式路由键值对传参</button><hr><router-view></router-view></div>
</template><style scoped></style>
/**导入创建路由对象函数 */
import {createRouter, createWebHashHistory} from 'vue-router'//导入组件
import ShowDetail from '../components/ShowDetail.vue'
import ShowDetail2 from '../components/ShowDetail2.vue'//通过函数创建路由对象
const router = createRouter({history:createWebHashHistory(),routes:[{//键值对参数默认自动解析,无需占位符path:"/showDetail2",component:ShowDetail2  },{//路由路径传参:为该路径设置占位符path:"/showDetail/:id/:language",name:"showDetail",component:ShowDetail}]
})//导出路由对象
export default router

5. 路由守卫

//路由守卫
/*** 全局前置守卫:在路由切换之前被调用* 可用于对数据进行处理,校验用户是否登录等功能* to   代表发送数据到哪去* from 代表请求数据从哪来* next 代表放行,不调用默认拦截(类似filterChen)*/
router.beforeEach((to, from, next) => {console.log("before")console.log(from.path)console.log(to.path)//放行,不执行该方法默认拦截next()
})/*** 全局后置守卫:在路由切换之后被调用* 可用于处理数据*/
router.afterEach((to, from) => {console.log("after")}
)

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

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

相关文章

Leetcode3138. 同位字符串连接的最小长度

Every day a Leetcode 题目来源&#xff1a;3138. 同位字符串连接的最小长度 解法1&#xff1a;枚举同位子串的长度 从小到大枚举字符串 t 的长度 len。 因为字符串 s 由字符串 t 和它的同位字符串连接而成&#xff0c;所以 n % len 0。 然后比较所有首字母下标为 0、len…

HTML/CSS3

1.CSS CSS的作用在于在HTML的基础上(决定网页的内容和结构)对网页进行排版布局 对网页中的元素提供样式 使得网页显得更加精美CSS全称是cascading style sheets 即层叠样式表CSS样式的书写格式&#xff1a;样式名: 样式值 例如&#xff1a;color: red建议:之后进行空格 CSS样式…

redis的双写一致性

双写一致性问题 1.先删除缓存或者先修改数据库都可能出现脏数据。 2.删除两次缓存&#xff0c;可以在一定程度上降低脏数据的出现。 3.延时是因为数据库一般采用主从分离&#xff0c;读写分离。延迟一会是让主节点把数据同步到从节点。 1.读写锁保证数据的强一致性 因为一般放…

在 Python 的哪个版本之后,字典的添加顺序与键的顺序是一致的?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 在 Python 的不同版本中&#xff0c;字典&#xff08;dict&#xff09;类型的行为发生了显著变化。在 Python 3.6 及之前的版本中&#xff0c;字典是无序的&#xff0c;这意味着字典在遍历时不能保证按…

笨方法自学python(一)

我觉得python和c语言有很多相似之处&#xff0c;如果有c语言基础的话学习python也不是很难。这一系列主要是学习例题来学习python&#xff1b;我用的python版本是3.12 代码编辑器我用的是notepad&#xff0c;运行py程序用cmd 现在开始写第一个程序&#xff1a; print ("…

GPT-SoVits:语音克隆,语音融合

首发网站 https://tianfeng.space 前言 零样本文本到语音&#xff08;TTS&#xff09;&#xff1a; 输入 5 秒的声音样本&#xff0c;即刻体验文本到语音转换。少样本 TTS&#xff1a; 仅需 1 分钟的训练数据即可微调模型&#xff0c;提升声音相似度和真实感。跨语言支持&…

ESP32 + ST7789 LCD

1、准备 ESP32 单片机开发板 ST7789 LCD 模块&#xff08;240 * 320 像素&#xff09; 杜邦线 2、接线 LCD功能ESP32VCC 供电电压正极 3.3V 、 5V GND 供电电压负极 GNDIDN / MOSI SPI 接口数据 引脚 23CLK 串行接口时钟信号 18CS 芯片选择引脚&#xff1b;低电平有效 5DC 显…

【实战】采用jenkins pipeline实现自动构建并部署至k8s

文章目录 前言部署jenkins编写docker-compose-jenkins.yaml配置maven源启动jenkins解锁jenkins Jenkins默认插件及git、镜像仓库、k8s凭证配置host key verification configuration修改为不验证Gitee ssh阿里云镜像仓库ssh编写pipeline安装以下常用插件将kubectl命令文件拷贝到…

Threejs 动态修改InstanceMesh实例化几何体中单个实例的颜色

目录 InstanceMesh多实例 场景 思路 注意点 实现 效果 InstanceMesh多实例 instanceMesh 是使用InstancedMesh类来创建实例化的几何体。它适用于当需要大量重复的几何体时&#xff0c;但是每个实例之间有不同的变换属性&#xff08;如位置、旋转、缩放等&#xff09; 场…

windows使用Docker-Desktop部署lobe-chat

文章目录 window安装docker-desktop下载和启动lobe-chatAI大语言模型的选择lobe-chat设置大模型连接 window安装docker-desktop docker-desktop下载地址 正常安装应用&#xff0c;然后启动应用&#xff0c;注意启动docker引擎 打开右上角的设置&#xff0c;进入Docker Engine设…

【系统分析师】软件架构设计

文章目录 1、构件与软件复用1.1 主流构件标准1.2 构件获取与管理1.3 构件复用的方法 2、软件架构概述3、软件架构建模4、软件架构风格4.1 经典架构风格4.2 层次架构风格4.3 富互联网应用-RIA 5、面向服务的架构5.1 SOA概述5.2 SOA的关键技术5.3 SOA的实现方法 6、软件架构评估6…

Golang | Leetcode Golang题解之第83题删除排序链表中的重复元素

题目&#xff1a; 题解&#xff1a; func deleteDuplicates(head *ListNode) *ListNode {if head nil {return nil}cur : headfor cur.Next ! nil {if cur.Val cur.Next.Val {cur.Next cur.Next.Next} else {cur cur.Next}}return head }

前端开发工程师——ajax

express框架 终端输入 npm init --yes npm i express 请求报文/响应报文 // 1.引入express const express require(express);// 2.创建应用对象 const app express();// 3.创建路由规则 // request:是对请求报文的封装 // response&#xff1a;是对响应报文的封装 app.get(…

【数据结构】浅谈

✨✨✨专栏&#xff1a;数据结构 &#x1f9d1;‍&#x1f393;个人主页&#xff1a;SWsunlight 目录 一、概念&#xff1a; 二、物理结构&#xff1a; 1、顺序存储结构&#xff1a; 2、链式存储结构&#xff1a; 3、数据索引存储结构: 4、数据散列存储结构&#xf…

SVN 合并到 Git 时有文件大于 100 M 被限制 Push

如果有文件大小大于 100M&#xff0c;GitHub 是会被限制推送到仓库中的&#xff0c;大概率情况会显示下面的错误&#xff1a; remote: Resolving deltas: 100% (3601/3601), done. remote: error: Trace: aea1f450da6f2ef7bfce457c715d0fbb9b0f6d428fdca80233aff34b601ff59b re…

声明变量的六种方法

ES6 声明变量的六种方法 varfunctionletconstclassimport 顶层对象的属性 1. ES6 声明变量的六种方法 ES5 只有两种声明变量的方法&#xff1a; var 命令和 function 命令。 ES6 除了添加 let 和 const 命令&#xff0c;还有另外两种声明变量的方法&#xff1a; import 命令和…

笨方法自学python(二)-注释

注释和#号 程序里的注释是很重要的。它们可以用自然语言告诉你某段代码的功能是什么。在你想要临时移除一段代码时&#xff0c;你还可以用注解的方式将这段代码临时禁用。 # A comment, this is so you can read your program later. # Anything after the # is ignored by py…

Python专题:八、列表(1)

Python的内置数据类型 数据类型&#xff1a;列表 list类型 可以是字符串&#xff0c;浮点数&#xff0c;整数&#xff0c;列表 列表特性 ①集合性的数据类型 ②列表是有序的 ③列表是可更新的 访问列表元素的方式也是[索引]&#xff0c;也是从0开始的&#xff0c;不能超过…

【前端】桌面版docker并部署前端项目

环境 win10专业版 2004 , 需科学 官网下载安装包并安装4.29.0版本 终端输入 wsl --installdocker桌面版和模拟器只能选一个&#xff0c;不然一直转圈圈 镜像配置加速&#xff0c;在settings—>docker engine下 {"builder": {"gc": {"defaultKee…

二叉树介绍

引入 定义 区别 定义不同 形态不同 基本形态