工作笔记:Vue 3 中使用 vue-router 进行导航与监听路由变化

ops/2024/9/19 22:06:42/ 标签: vue.js, 笔记, javascript, 前端

一、使用 useRouter 进行导航

在 Vue 3 组件中,你可以使用 useRouter 来方便地进行页面导航。以下是一个简单的示例:

<template><button @click="navigateToHome">跳转到首页</button>
</template><script setup>
import { useRouter } from 'vue-router';const router = useRouter();const navigateToHome = () => {router.push({ name: 'home' }); // 假设你已定义了名为 'home' 的路由
};
</script>

二、监听路由变化

有时我们需要在路由发生变化时执行某些操作,例如显示或隐藏某些元素。Vue 3 提供了 useRoute 来获取当前的路由状态,并使用 watch 来监听路由的变化。以下是一个示例:

<template><div v-if="isShow">这是新增页面</div>
</template><script setup>
import { useRoute, watch } from 'vue-router';
import { ref } from 'vue';const route = useRoute();const isShow = ref(false);watch(() => route.name, val => {if (val === 'newPage') {isShow.value = true;} else {isShow.value = false;}
});
</script>

总结

通过上述代码,你可以:

  1. 使用 useRouter 进行导航

    • 导入 useRouter
    • 使用 router.push 方法进行页面跳转。
  2. 监听路由变化

    • 导入 useRoute 和 watch
    • 使用 watch 监听 route.name 的变化,并根据当前路由名称来更新组件状态。

希望这篇笔记对你有所帮助!

 


http://www.ppmy.cn/ops/113138.html

相关文章

【C语言】malloc()函数详解(动态内存开辟函数)

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:C语言 ⚙️操作环境:Visual Studio 2022 目录 一.malloc()函数简介 1.函数功能 2.函数参数 &#x1f4cc;size_t size 3.函数返回值 4.函数头文件 5.函数生成空间(与calloc区别) 二.malloc()函数的具体使用 1.使…

如何划分 PostgreSQL 数据库权限

PostgreSQL 具有灵活的权限管理机制&#xff0c;可以通过用户、角色以及不同的权限粒度进行划分。合理地划分权限&#xff0c;是 DBA&#xff08;数据库管理员&#xff09;必须掌握的技能&#xff0c;这不仅能确保数据的安全性和完整性&#xff0c;还能提高业务操作的效率。在刚…

JS高级(三)、深浅拷贝,异常处理,this指向总结,改变this指向;节流和防抖

文章目录 一、深浅拷贝1. 浅拷贝&#xff1a;object.assign;解构赋值2. 深拷贝&#xff1a;递归函数、lodash的cloneDeep、JSON 二、异常处理1. throw2. try catch finally 三. this总结1、this的指向2、箭头函数this的指向3、改变函数this的指向 四. 节流和防抖1. 防抖(deboun…

GO 闭包

文章目录 1. **累加器&#xff08;状态保持器&#xff09;**2. **缓存&#xff08;记忆化&#xff09;**3. **工厂函数**4. **函数式编程风格**5. **创建动态行为的函数**6. **控制访问权限** 总结 高级闭包的使用在 Go 中非常灵活和强大&#xff0c;特别是在需要保存状态或对外…

Python 课程11-Web 开发

前言 Web 开发已经成为现代软件开发的核心领域之一&#xff0c;许多应用程序和服务都通过 Web 来与用户和其他系统交互。Python 作为一门广泛使用的编程语言&#xff0c;提供了多种 Web 开发框架&#xff0c;其中最流行的两个框架是 Flask 和 Django。 Flask 是一个轻量级的 W…

Linux命令:对文本文件的内容进行排序的工具sort详解

目录 一、概述 二、用法 1、 基本语法 2、 常用选项 3、获取帮助 三、示例 1. 基本用法 2. 按数字排序 3. 按第二列排序 4. 逆序排序 5. 删除重复行 6. 忽略大小写排序 7. 按人类可读的数值排序 8. 按版本号排序 四、高级用法 1. 与 uniq 结合使用去重 2. 与 gr…

简单题66-加一(Python)20240918

问题描述&#xff1a; python class Solution(object):def plusOne(self, digits):""":type digits: List[int]:rtype: List[int]"""n len(digits)# 从最后一位开始处理进位for i in range(n - 1, -1, -1):if digits[i] < 9:digits[i] 1re…

音视频入门基础:AAC专题(9)——FFmpeg源码中计算AAC裸流每个packet的duration和duration_time的实现

音视频入门基础&#xff1a;AAC专题系列文章&#xff1a; 音视频入门基础&#xff1a;AAC专题&#xff08;1&#xff09;——AAC官方文档下载 音视频入门基础&#xff1a;AAC专题&#xff08;2&#xff09;——使用FFmpeg命令生成AAC裸流文件 音视频入门基础&#xff1a;AAC…

黑神话悟空mac可以玩吗

黑神话悟空mac上能不能玩对于苹果玩家来说很重要&#xff0c;那么黑神话悟空mac可以玩吗&#xff1f;目前是玩不了了&#xff0c;没有针对ios系统的版本&#xff0c;只能之后在云平台上找找了&#xff0c;大家可以再观望下看看。 黑神话悟空mac可以玩吗 ‌使用CrossOver‌&…

c#:System.Text.Json 的使用四(如何忽略[JsonPropertyName])

环境&#xff1a; .net 6.0vs2022 系列篇&#xff1a; 《c#&#xff1a;System.Text.Json 的使用一》 《c#&#xff1a;System.Text.Json 的使用二》 《c#&#xff1a;System.Text.Json 的使用三&#xff08;从Newtonsoft迁移&#xff09;》 《c#&#xff1a;System.Text.Json…

Android Framework(六)WMS-窗口显示流程——窗口内容绘制与显示

文章目录 窗口显示流程明确目标 窗户内容绘制与显示流程窗口Surface的5种状态完整流程图 应用端处理finishDrawingWindow 的触发 system_service处理WindowState状态 -- COMMIT_DRAW_PENDING本次layout 流程简述applySurfaceChangesTransaction 方法概览READY_TO_SHOW和HAS_DRA…

【ARM】SOC的多核启动流程详解

基础概念 • cold boot 冷启动&#xff0c;一上电就开始运行 • warm boot 热启动&#xff0c;只是复位一下 • Primary boot 只给主核跑的那段代码 • Secondary boot 给从核跑的代码 还两种配置&#xff1a; • reset地址是可编程的&#xff0c;则会配置PROGRAMMABLE_RESET_…

Git项目管理工具

分布式版本控制系统 实际操作: 设置用户信息 git config --global user.name “itcast” git config --global user.email "hello@itcast.cn" </

TCP Analysis Flags 之 TCP ZeroWindow

前言 默认情况下&#xff0c;Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态&#xff0c;并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时&#xff0c;会对每个 TCP 数据包进行一次分析&#xff0c;数据包按照它们在数据包列表中出现的顺序进行处理。可…

MacBook苹果电脑安装JDK8、JDK17教程,环境变量配置 + 快速切换JDK版本

MacBook苹果电脑安装JDK8、JDK17教程&#xff0c;环境变量配置 快速切换JDK版本 MacBook M1 安装JDK及环境变量配置 1、在Oracle官网下载JDK 2、安装JDk 3、配置环境变量 4、快速切换 1.下载JDK&#xff08;官网&#xff09; 1.1官网下载dmg安装包 Java Archive | Oracle J…

GPT代码记录

#include <iostream>// 基类模板 template<typename T> class Base { public:void func() {std::cout << "Base function" << std::endl;} };// 特化的子类 template<typename T> class Derived : public Base<T> { public:void…

大模型分离架构学习记录

1、大模型相关名词 TOE&#xff08;TCP Offload Engine&#xff09;是指TCP卸载引擎。它是一种网络技术&#xff0c;通过将TCP/IP协议栈的一部分处理任务从主机的CPU卸载到网卡&#xff1b; 也就是RDMANVLink :在单台服务器内 8 块 GPU 卡通过 NVLink 连接。不同服务器之间的 …

MySQL——数据库的高级操作(一)数据备份与还原(1)数据的备份

在操作数据库时&#xff0c;难免会发生一些意外造成数据丢失。例如&#xff0c;突然停电、管理员的操作失误都可能导致数据的丢失。为了确保数据的安全&#xff0c;需要定期对数据库进行备份&#xff0c;这样&#xff0c;当遇到数据库中数据丢失或者出错的情况&#xff0c;就可…

vue3+ant design vue 中弹窗自定义按钮设置及以冒号为基准布局

1、自定义弹窗按钮&#xff0c;去除取消和确定按钮。&#xff08;网上很多方法都是说通过插槽来实现&#xff0c;但是试了下不生效&#xff0c;那既然插槽不生效的话&#xff0c;干脆直接写按钮就好了&#xff09; <a-modalv-model:open"open"title"人员信息…

探索Go语言中的Goroutine并发机制

什么是Goroutine 在Go语言中,Goroutine 是程序中最基本的并发单位。事实上,每个Go程序都会自动创建一个goroutine,那就是主goroutine,程序启动时会立即执行。Goroutine是Go语言中处理并发问题的核心工具,因此理解它的工作原理至关重要。 简而言之,Goroutine是并发执行的…