vue3监听路由的变化

这篇具有很好参考价值的文章主要介绍了vue3监听路由的变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

可以使用监听router.currentRoute.value的值,,来监听路由的变化。

使用:

引入:

import { useRouter} from 'vue-router'

setup使用 :

const router = useRouter()
// 监听当前路由
watch(
  () => router.currentRoute.value,
  (newValue: any) => {
    console.log('newValue',newValue)
  },
  { immediate: true }
)

控制台输出的值newValue
vue3 watch 路由,vue相关问题(vue3、vue2),前端,javascript,vue.js
如果我们只需要监听当前路由name的变化,就可以这么监听router.currentRoute.value.name文章来源地址https://www.toymoban.com/news/detail-522085.html

const router = useRouter()
// 监听当前路由的name变化
watch(
  () => router.currentRoute.value.name,
  (newRouterName: any) => {
    console.log('newRouterName',newRouterName)
  },
  { immediate: true }
)

Tips:

  • immediate:true //true就表示会立即执行。(watch默认绑定,页面首次加载时,是不会执行的。只有值发生改变才会执行。所以不加immediate:true //true的话,首页不会触发要执行的方法)
  • deep:true //true表示深度监听,这时候就能监测到newValue值变化

到了这里,关于vue3监听路由的变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2 Watch监听

    在Vue2中,我们可以使用watch来监听一个数据的变化,并且在数据变化时执行一些操作。这个特性是Vue2非常强大的一个功能,可以帮助我们监控一个或多个数据的变化,然后做出相应的反应。 要使用watch,我们需要在Vue组件的选项中声明一个watch对象,如下: watch对象的每个属

    2024年02月17日
    浏览(53)
  • watch监听,解决Vue3父组件异步props传值,子组件接收不到的问题

    写静态数据的时候父组件传值子组件接收并渲染是没问题的,但当父组件异步获取数据,子组件接收数据会晚于渲染,就会产生接收不到的问题,我在用echarts绘制图表时图表就直接不显示  用watch监听props数据并在watch内进行赋值操作可解决该问题 直接上代码 父组件,vue3语法

    2024年02月15日
    浏览(44)
  • Vue2 watch监听props的值

    再次遇到监听子组件收到父组件传过来的值,如果这个值变化,页面中的值发现是不会跟着同步变化的。所以监听props中的值,一直监听。   代码:  

    2024年02月13日
    浏览(43)
  • 关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite(摘) 状态管理: Vuex Pi

    2024年02月15日
    浏览(50)
  • vue2 如何监听数组的变化

    在Vue 2中,底层是通过重写数组的原型方法来实现对数组变化的监听。具体来说,Vue 2使用了一个名为Observer的类来劫持数组的原型方法,使其在调用这些方法时能够触发相应的变化通知。 当Vue 2初始化一个响应式对象时,如果对象是一个数组,Vue会将数组的原型指向一个经过

    2024年02月12日
    浏览(50)
  • 【Vue2.x源码系列07】监听器watch原理

    上一章 Vue2计算属性原理,我们介绍了计算属性是如何实现的?计算属性缓存原理?以及洋葱模型是如何应用的? 本章目标 监听器是如何实现的? 监听器选项 - immediate、deep 内部实现 在 Vue初始化实例的过程中,如果用户 options选项中存在侦听器,则初始化侦听器 watch 类型:

    2023年04月20日
    浏览(49)
  • 前端vue2、vue3去掉url路由“ # ”号——nginx配置

    大家好,我是yma16,本文分享关于vue2、vue3去掉url路由 # 号——nginx配置。 html的 hash模式 HTML的hash模式指的是URL中的锚点部分(#后面的内容)被用于在单个页面中显示不同的内容,而不是导航到不同的页面。例如: 在这个示例中, #about 部分是一个锚点,用于在页面上显示关

    2024年02月11日
    浏览(75)
  • vue3 watch 监听多值以及深度监听用法

    1.监听单个值 引入: import {…, watch} from “vue”; import {useRouter} from ‘vue-router’; 2.监听多个值 还是上面路由的例子 2.深度监听

    2024年02月14日
    浏览(54)
  • Vue3 —— watch 监听器及源码学习

    该文章是在学习 小满vue3 课程的随堂记录 示例均采用 script setup ,且包含 typescript 的基础用法 在 vue3 中,必须是 ref 、 reactive 包裹起来的数据,才可以被 watch 监听到 1、语法: watch(source, cb, options) source 是监听的目标,有 4 种书写形式: reactive 形式的响应式数据 ref 形式的响

    2024年02月12日
    浏览(39)
  • vue3中用watch监听响应式数据的注意点

    如果你在vue3中使用reactive()方法创建响应式数据,然后又用torefs()方法将响应式数据解构成单一的ref响应式数据。 此时,如果你想用watch监听解构出来单一的响应式数据,watch不起作用。 此时,你需要用watch监听之前的reactive()方法创建的数据,这样是能监听到的,要开启深度监

    2024年02月13日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包