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.mzph.cn/pingmian/10325.shtml

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

相关文章

行业新应用:电机驱动将成为机器人的动力核心

电机已经遍布当今社会人们生活的方方面面&#xff0c;不仅应用范围越来越广&#xff0c;更新换代的速度也日益加快。按照工作电源分类&#xff0c;可以将它划分为直流电机和交流电机两大类型。直流电机中&#xff0c;按照线圈类型分类&#xff0c;又可以分为有铁芯的电机、空心…

java日常选择题

题目来自牛客网 1.以下哪个接口的定义是正确的?() A interface B { void print() {} ;} B interface B { static void print();} C.abstract interface B extends A1, A2 //A1、A2为已定义的接口 {abstract void print(){};} D.interface B { void print(); 选D&#xff0c;因…

一对多在线教育系统,疫情后,在线教育有哪些变革?

疫情期间&#xff0c;全面开展的在线教育经历了从不适应到认可投入并常态化的发展过程。如何发挥在线教学优势&#xff0c;深度融合线上与线下教育&#xff0c;将在线教育作为育人方式变革动力&#xff0c;提升育人服务水平&#xff0c;是复学复课后学校教育教学面临的关键问题…

ARM单片机实现流水灯(GD32)

根据上图可知使用的引脚分别是PA8,PE6,PF6流水灯功能的实现要分别初始化这几个引脚 流水灯实现 编写流水灯代码 LED.C #include "gd32f30x.h" // Device header #include "Delay.h" // 初始化LED灯 void LED_Init(void){// 使能RCU时钟…

6 Shell脚本的条件测试与比较

已知:$?执行命令后 返回0 表示真 返回1 表示假 6.1.1条件测试 常用的语法 条件表达式语法 说明 1 test <测试表示式> test命令与后面表达式最少一个空格 等同于2 2 [ <测试表示式> ] []边界与内容左右2边最…

记录一次pods 导入 SocketRocket库的经历

折腾一上午&#xff0c;brew 安装成功了 cococapod 然后项目启动下载一个SocketRocket库 下载成功后总是报错&#xff1a; 睡了2个多小时&#xff0c;我在qq就交流群里求助&#xff1a; 终于把项目管理&#xff0c;在命令行里执行这句&#xff1a; open chat_app.xcworkspace…

Linux进程间通信 pipe 实现线程池 命名管道 实现打印日志 共享内存代码验证 消息队列 信号量

文章目录 前言管道匿名管道 pipe测试管道接口 --> 代码验证管道的4种情况管道的5种特征 线程池案例代码实现&#xff1a;ProcessPool.ccTask.hpp检测脚本makefile 命名管道代码演示&#xff1a;makefilenamedPipe.hppserver.ccclient.cc 实现日志Log.hpp 共享内存共享内存原…

JavaWeb后端基础知识(2)包括(MyBatis)

JavaWeb后端基础知识&#xff08;2&#xff09; 目录 JavaWeb后端基础知识&#xff08;2&#xff09; 一. MyBatis 1.什么是Mybatis? 2.步骤 &#xff08;1&#xff09;准备工作 &#xff08;2&#xff09;引入Mybatis的相关依赖&#xff0c;配置Mybatis &#xff08;…

串口属性中的BM延时计时器问题

如果使用程序修改则需要修改注册表对应位置如下 第一个示例&#xff08;217&#xff09; 第二个示例&#xff08;219&#xff09; 需要注意的事情是修改前必须点查看串口名称&#xff08;例如上图是com5&#xff09; 程序修改&#xff1a; 有没有办法以编程方式更改USB <…

【力扣】63.不同路径 II

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 目录 1.题目描述 2.思路分析 3.代码实现 1.题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试…

unity通过路径找到特定对象并获取指定类型组件的泛型方法

/// <summary>/// 通过路径找到指定类型的组件/// </summary>/// <param name"path">path: 指定要查找的组件所在的GameObject的路径</param>/// <param name"parent">parent: 指定查找的GameObject的父对象&#xff0c;默认…

uniapp管理后台编写,基于uniadmin和vue3实现uniapp小程序的管理后台

一&#xff0c;创建uniAdmin项目 打开开发者工具Hbuilder,然后点击左上角的文件&#xff0c;点新建&#xff0c;点项目。如下图。 选择uniadmin&#xff0c;编写项目名&#xff0c;然后使用vue3 记得选用阿里云服务器&#xff0c;因为最便宜 点击创建&#xff0c;等待项目创…

Codeforces Round 605 (Div. 3) A~D

本人水平不高&#xff0c;开这个专栏主要是督促自己补题&#xff0c;有些题对目前的我来说还比较难&#xff0c;还补不动&#xff0c;等以后能力上来了再补。。。 原题链接&#xff1a;Dashboard - Codeforces Round 605 (Div. 3) - Codeforces 目录 A. Three Friends B. Sn…

Linux端口状态含义(未完

前言 在面试或者企业实战中常见的命令 那就是查询端口命令是哪个 1. 前沿知识 查询端口命令&#xff1a;lsof -i 查询端口的状态&#xff1a;netstat 命令参数说明-tTCP端口-uUDP端口-p进程表示符和程序名称-n显示IP 常用的netstat结合grep进行精准查询 添加链接描述 添…

C# 快速把List<string>集合转换成一个字符串

在C#中&#xff0c;要将List<string>类型的集合转换成一个单一的字符串&#xff0c;其中各元素由特定的分隔符连接&#xff0c;通常推荐使用String.Join()方法。 简单的示例&#xff1a; 使用for循环 代码如下&#xff1a; using System; using System.Collections.G…

【Linux:lesson1】的基本指令

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f697;打开Xshell&#xff0c;登陆root…

初识java--javaSE(3)--方法,递归,数组,

文章目录 一 方法的使用1.1 什么是方法&#xff1f;main方法注意事项 1.2 方法的调用嵌套调用在方法调用时形参与实参的关系&#xff1a; 1.3 方法的重载方法重载的意义&#xff1f;总结方法重载&#xff1a;方法签名&#xff1a; 二 递归什么是递归&#xff1f;递归的精髓&…

蛋糕店做配送小程序的作用是什么

蛋糕烘焙除了生日需要&#xff0c;对喜吃之人来说往往复购率较高&#xff0c;除线下实体店经营外&#xff0c;更多的商家选择线上多种方式获客转化、持续提高生意营收&#xff0c;而除了进驻第三方平台外&#xff0c;构建品牌私域自营店铺也同样重要。 运用【雨科】平台搭建蛋…

ABAP跨client的RFC调用

1、SM59配置连接 2、创建需要调用的函数&#xff0c;ZGET_TM_LIST&#xff0c;开启远程启用模块 3、新建调用程序 DATA:L_MSG TYPE C,LSH(30) TYPE C. DATA:IT_ZSTM_LIST TYPE STANDARD TABLE OF ZSTM_LIST WITH HEADER LINE.CALL FUNCTION ZGET_TM_LIST DESTINATION ZTEST_R…

C# 判断Access数据库中表是否存在,表中某个字段是否存在

在C#中判断Access数据库中某个表是否存在以及该表中某个字段是否存在&#xff0c;可以通过以下步骤实现&#xff1a; 判断表是否存在 可以使用ADO.NET中的OleDbConnection.GetOleDbSchemaTable方法来获取数据库的架构信息&#xff0c;并检查特定的表是否存在。 using System…