Vue:路由管理vue-router

Vue Router 是 Vue 官方的客户端路由解决方案,可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

1. Vue3 中使用 vue-router


安装

npm install vue-router@4

创建路由配置文件

新建 router/index.js 文件按用来统一管理路由配置。

// router/index.js
import { createRouter, createWebHistory } from "vue-router";const router = createRouter({history: createWebHistory(),routes: [{path: '/',component: () => import("@/views/Home"),},{path: '/user',component: () => import("@/views/User"),}]
})export default router;

在 main.js 中注册路由

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

在组件中使用路由

<!-- App.vue -->
<template><nav><router-link to="/">首页</router-link><router-link to="/user">用户</router-link></nav><main><router-view /></main></template>

2. 路由配置


动态路由匹配

// router/index.jsconst routes = [{path: '/user/:id',component: User,}
]

路径参数用冒号 : 表示。当一个路由被匹配时(/user/123),它的 params 的值可以使用 useRoute() 钩子函数获取。

<!-- User.vue -->
<script setup>
import { useRoute } from 'vue-router'const route = useRoute();
console.log(route.params);		// {id: 123}
</script>

使用带有参数的路由时需要注意的是,当用户从 /users/122 导航到 /users/123 时,相同的组件实例将被重复使用,从而组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话,可以使用 watch 监听 route.params。

嵌套路由

const routes = [{path: '/user/:id',component: User,children: [{        path: '',				// 当 /user/:id 匹配成功component: UserHome,	// UserHome 将被渲染到 User 的 <router-view> 内部},{        path: 'posts',			// 当 /user/:id/posts 匹配成功component: UserPosts,	// UserPosts 将被渲染到 User 的 <router-view> 内部},],},
]

注意:子路由的 path 属性中不可以带 /,否则无法匹配。

<!-- User.vue -->
<template><div>{{ route.params.id }}</div><router-view />
</template>

3. 路由导航


<script setup>
import { useRouter } from 'vue-router'const router = useRouter()
router.push()		// 导航
router.replace()	// 替换
router.go(1)		// 返回上一条记录
</script>

传参

const username = 'eduardo'router.push(`/user/${username}`) 		// -> /user/eduardorouter.push({ path: `/user/${username}` }) 	// -> /user/eduardo// 命名路由
router.push({ name: 'user', params: { username } }) 	// -> /user/eduardo// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) 	// -> /user// 带查询参数
router.push({ path: '/user', query: { username } })		// -> /user?username=eduardo

4. 导航守卫

vue-router 提供的导航守卫主要用于在路由导航过程中添加一些额外的逻辑,如权限验证、数据获取等。它允许你在路由发生变化的不同阶段插入自定义的代码片段,从而控制路由的跳转和取消。

全局前置守卫

router.beforeEach 用于在路由跳转前执行一些逻辑,例如身份验证。当一个导航触发时,全局前置守卫按照创建顺序调用。

// router/index.js
const router = createRouter({ ... })router.beforeEach(async (to, from) => {if (!isAuthenticated && to.path !== '/login'){return '/login'				// 检查用户是否已登录,否则重定向到登录页面}
})
  • 参数
    • to:即将要进入的目标
    • from:当前导航正要离开的路由
  • 返回值
    • false:取消当前的跳转
    • 路由地址:跳转到指定路由
    • 不返回或返回 true / undefined:进行默认导航

全局解析守卫

router.beforeResolve 在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。适用于在组件渲染之前获取必要的数据。例如,你可能想要根据路由参数从服务器获取数据,并在组件渲染之前将数据传递给组件。

全局后置钩子

router.afterEach 在导航完成后触发。它不改变导航本身,不能取消或重定向导航,而通常用于执行一些与导航结果相关的操作,如追踪、分析或调试。例如,你可以在这里记录页面访问统计信息。

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

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

相关文章

每天CTF小练(6.6)--基础异或

题目&#xff1a;[HNCTF 2022 Week1]XXXOOORRR from flag import flag from Crypto.Util.number import * import osrandBytes [bytes_to_long(os.urandom(64)) for _ in range(3)] m bytes_to_long(flag)print(fa {randBytes[0]}) print(fb {randBytes[0] ^ randBytes[1]…

DP读书:如何使用badge?(开源项目下的标咋用)

最近在冲论坛&#xff0c;很少更一些内容了。但遇到了一个真的有趣的&#xff1a; 开源项目下&#xff0c;蓝蓝绿绿的标是怎么用的呢&#xff1f; 这是我的主页Readme&#xff0c;在看一些NXP的主仓时&#xff0c;突然发现没有这个玩&#xff0c;就自己整了个 再比如我的CSDN专…

Vivado 设置关联使用第三方仿真软件 Modelsim

目录 1.前言2.Vivado 设置关联使用第三方仿真软件 Modelsim 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 Vivado 软件自带有仿真功能,该功能使用还是比较方便的,初学者可以直接使用自带的仿真功能。 Modelsim仿真工具是Model公司开发的。它支持Verilog、VHDL以及他…

springboot+vue+mybatis房屋租贷系统+PPT+论文+讲解+售后

本论文系统地描绘了整个网上房屋租赁系统的设计与实现&#xff0c;主要实现的功能有以下几点&#xff1a;管理员&#xff1b;首页、个人中心、房屋类型管理、房屋租赁管理、会员管理、订单信息管理、合同信息管理、退房评价管理、管理员管理&#xff0c;系统管理&#xff0c;前…

【JavaScript脚本宇宙】瞬息万变:探索实时Web应用的JavaScript库

鸟瞰实时Web开发&#xff1a;JavaScript库大比拼 前言 随着Web应用程序的发展&#xff0c;实时通讯已成为一个重要的需求。本篇文章将探索六个关键的JavaScript库&#xff0c;这些库为我们提供助力&#xff0c;使得实时Web应用程序的创建成为可能。 欢迎订阅专栏&#xff1a;…

分布式ID生成方式

1.UUID uuid方式存在问题&#xff1a;占用字节数比较大&#xff1b;ID比较随机&#xff0c;作为MySQL主键写入库时&#xff0c;为了保证顺序性将导致BTree节点分裂比较频繁&#xff0c;影响IO性能。 2.数据库方式 步长step 3&#xff0c;即为机器的数量。 第一台机器&#x…

鸿蒙开发 一 (三)、ArkTS开发实战上

ArkTS 从 TypeScript 优化而来&#xff0c; 但有些用法又不太一样&#xff0c; 在开发中&#xff0c; 经常会出现一些报错提示&#xff0c;下面我们也汇总一些常见错误&#xff0c;捡一些常见的整理一下 Promise 的用法&#xff1a; //TypeScript 写法&#xff1a;private load…

2024 Q1企业级SSD市场暴涨,国产努力追赶!

在2024年第一季度&#xff0c;由于对高容量存储需求的激增&#xff0c;企业级固态硬盘&#xff08;SSD&#xff09;市场的收入实现了显著增长&#xff0c;达到了37.58亿美元&#xff0c;与上一季度相比增长了62.9%。这一增长主要得益于供应商减产导致的高容量订单需求未得到满足…

大模型高级 RAG 检索策略之混合检索

古人云&#xff1a;兼听则明&#xff0c;偏信则暗&#xff0c;意思是要同时听取各方面的意见&#xff0c;才能正确认识事物&#xff0c;只相信单方面的话&#xff0c;必然会犯片面性的错误。 在 RAG&#xff08;Retrieval Augmented Generation&#xff09;应用中也是如此&…

LeetCode 算法:合并区间c++

原题链接&#x1f517;&#xff1a;合并区间 难度&#xff1a;中等⭐️⭐️ 题目 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰…

Nginx编译安装+nginx模块

一、I/O模型 处理高并发的时候用 1.1I/O模型简介 同步/异步&#xff08;消息反馈机制&#xff09;&#xff1a;关注的是消息通信机制&#xff0c;即调用者在等待一件事情的处理结果时&#xff0c;被调用者是否提供完成状态的通知。 同步&#xff1a;synchronous&#xff0c;…

java第二十课 —— 面向对象习题

类与对象练习题 编写类 A01&#xff0c;定义方法 max&#xff0c;实现求某个 double 数组的最大值&#xff0c;并返回。 public class Chapter7{public static void main(String[] args){A01 m new A01();double[] doubleArray null;Double res m.max(doubleArray);if(res !…

探索Linux中的`tree`命令:目录结构的可视化利器

探索Linux中的tree命令&#xff1a;目录结构的可视化利器 在Linux系统中&#xff0c;管理文件和目录结构是一项日常任务。当我们需要快速查看目录的层次结构时&#xff0c;tree命令无疑是一个强大而直观的工具。本文将详细介绍tree命令的功能、用法以及一些实用的选项。 一、…

Mysql8安装教程与配置(超详细图文)

MySQL 8.0 是 MySQL 数据库的一个重大更新版本&#xff0c;它引入了许多新特性和改进&#xff0c;旨在提高性能、安全性和易用性。 1.下载MySQL 安装包 注&#xff1a;本文使用的是压缩版进行安装。 &#xff08;1&#xff09;从网盘下载安装文件 点击此处直接下载 &#…

JavaWeb3 Ajax+Axios+Element+Nginx部署

Ajax 异步JS和XML 1.数据交换&#xff1a;给服务器发送请求&#xff0c;并获取服务器相应的数据 2.异步交互&#xff1a;在不重新加载整个页面的情况下&#xff0c;与服务器交换数据并更新部分网页 同步与异步 原生Ajax <!DOCTYPE html> <html> <body><…

卷积池化尺寸计算公式

卷积层[Conv]&#xff1a; 卷积CNN是我们最常使用的&#xff0c;但是有时候需要观察他的输出前后的差异&#xff0c;这里描述下计算方式&#xff0c;具体如下&#xff1a; 图片大小&#xff1a;WxHxD W:宽 H:高 D:通道&#xff08;RGB&#xff09; 例:320x320x3 卷积核&…

Android——热点开关演讲稿

SoftAP打开与关闭 目录 1.三个名词的解释以及关系 Tethering——网络共享&#xff0c;WiFi热点、蓝牙、USB SoftAp——热点(无线接入点)&#xff0c;临时接入点 Hostapd——Hostapd是用于Linux系统的软件&#xff0c;&#xff0c;支持多种无线认证和加密协议&#xff0c;将任…

后端开发面经系列 -- 同程旅行C++一面

同程旅行C一面 公众号&#xff1a;阿Q技术站 文章目录 同程旅行C一面1、sizeof与strlen的区别&#xff1f;2、运算符和函数有什么区别&#xff1f;3、new和malloc&#xff1f;4、内存泄漏与规避方法&#xff1f;5、悬空指针与野指针&#xff1f;6、手撕冒泡排序&#xff1f;7、…

Java集合的迭代操作,Set Map接口以及工具类方法

1、集合元素迭代 1.1 集合元素遍历 集合的遍历&#xff1a;把集合中的每一个元素获取出来 使用for遍历 使用迭代器遍历 Iterator表示迭代器对象&#xff0c;迭代器中拥有一个指针&#xff0c;默认指向第一个元素之前&#xff0c; . boolean hasNext()&#xff1a;判断指针后是…

硬件调试记录——ESD保护电路

ESD保护电路&#xff0c;测试其是否已经烧坏&#xff0c;用万用表二极管功能来测试. ESD电路表现出二极管特性&#xff0c;正向电压比反向电压高0.5v~0.7v