vue3界面使用router及使用watch监听router的改变

目录
  • 前言：
  • 1、路由跳转
  • 2、页面使用watch监听router跳转
  • vue3使用watch监听当前路由变化

前言：

众所周知，vue2中使用router非常简单，但是vue3中略微有些改变，这里来罗列下他的改变。

1、路由跳转

vue2

this.$router.push('/')

vue3

import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ path: "/" });

2、页面使用watch监听router跳转

vue2:

watch: {
    $route: {
      handler: function (route) {
        const query = route.query;

      },
      immediate: true,
    },
  },

vue3:

import { useRouter } from 'vue-router'
const router = useRouter()
watch(() =>
    router.currentRoute.value.path,
    (toPath) => {
      //要执行的方法
      const query = router.currentRoute.value.query;

    },{immediate: true,deep: true})

vue3使用watch监听当前路由变化

在某个.vue组件中使用watch就可以监听当前路由变化，从而进行逻辑操作

   let router = useRouter()
   // 监听当前路由变化
    watch(
      () => router.currentRoute.value,
      () => {
           console.log("路由变化了")
      }
    );

到此这篇关于vue3中界面使用router，以及使用watch来监听router的改变的文章就介绍到这了,更多相关vue3 watch监听router内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3中使用router4 keepalive的问题

    目录 vue3使用router4 keepalive问题 使用keepalive的坑 需求 解决 vue3使用router4 keepalive问题 项目从vue2升级到vue3,路由也紧跟着升级到了4,然后在使用keep-alive的时候一直不生效,就去查文档 vue2.x与vue3.0的App.vue配置有差异,在App.vue配置信息如下: vue2.x中,router-view可整个放入keepalive中,如下: <template>     <!-- vue2.x配置 --&

  • vue3中keep-alive和vue-router的结合使用方式

    vue3中keep-alive和vue-router的结合使用方式

    目录 前言 代码 一.为何要使用keep-alive? 二.vue2中使用keep-alive 三.vue3中使用keep-alive 四.keep-alive属性“include,exclude”的使用 前言 keep-alive:Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染. router-view:vue-router内置组件, 如果直接包含在keep-alive里面,所有路径匹配到的组件都会被缓存. 提示:以下是本篇文章正文内容,下面案例可供参考 代码 Hmoe组件:

  • VUE3中watch监听使用的不同情况总结

    目录 watch介绍 watch监听的不同情况 1 监听单个refimpl数据 2 监听多个refimpl数据 3 监听proxy数据 4 监听proxy数据的某个属性 5 监听proxy数据的某些属性 总结 watch介绍 vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参 watch(监听的数据,副作用函数,配置对象) watch(data, (newData, oldData) => {}, {immediate: true, deep: true})

  • vue3如何使用watch监听props中的数据

    vue3如何使用watch监听props中的数据

    目录 情况一:监听 props 中基本数据类型 情况二:监听 props 中引用数据类型且父组件不改变地址指向 情况三:监听 props 中引用数据类型且父组件改变地址指向 总结 写在最后 情况一:监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick = () => { testStr.value += 'P' } 子组件中监听传入的数据 watch( () => props.testStr, (newVal, oldVal) => { cons

  • vue3使用vue-router的完整步骤记录

    vue3使用vue-router的完整步骤记录

    前言 对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router. 一.第一步:安装vue-router npm install vue-router@4.0.0-beta.13 二.第二步:main.js 先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3) 可以

  • Vue3中watch监听使用详解

    Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • vue3界面使用router及使用watch监听router的改变

    目录 前言: 1.路由跳转 2.页面使用watch监听router跳转 vue3使用watch监听当前路由变化 前言: 众所周知,vue2中使用router非常简单,但是vue3中略微有些改变,这里来罗列下他的改变. 1.路由跳转 vue2 this.$router.push('/') vue3 import { useRouter } from 'vue-router' const router = useRouter() router.push({ path: "/" }); 2.

  • python利用wx实现界面按钮和按钮监听和字体改变的方法

    wxPython是Python语言的一套优秀的GUI图形库.允许Python程序员很方便的创建完整的.功能键全的GUI用户界面. wxPython是作为优秀的跨平台GUI库wxWidgets的Python封装和Python模块的方式提供给用户的. 只要介绍了如何利用wxPython实现吗按钮和对按钮的监听,并且改变了按钮的字体和颜色. python代码如下: #-*- coding:utf-8 -*- import wx class Frame(wx.Frame): def __init__(s

  • iOS中监听UITextField值改变事件的方法实例

    iOS中监听UITextField值改变事件的方法实例

    前言 在实际情况中我们有时候在界面输入时候需要让用户输入的数据与模型同步,那么可能我们就需要监听UITextField值改变事件,然后在响应的方法中将新的值同步到模型中.这次我们主要提出三种方案,其中第一种方案是不一定有效的,后两种方案则是比较可靠的方案. 一.实现UITextFieldDelegate协议. 这种方式实际上是由系统空间回调协议中的方式,并且通过查阅文档我们可以发现有以下相关接口是相关的. - (BOOL)textFieldShouldBeginEditing:(UITextFi

  • iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

    在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式 方式一: 全局通知 1.注册通知 在合适位置注册监听UITextView文本变化的全局通知 //UITextView 监听开始输入的两种方法 //方法一:通知 NotificationCenter.default.addObserver(self, selector: #selector(ComposeVC.textV

  • vue监听dom大小改变案例

    需求描述:layout左边菜单栏收缩,右边的content区域的swiper宽度没有改变(没有图,朋友的问题,大体画一下) 类似于点击折叠左边目录会变小,右边内容区域会变大,但是swiper在刚开始的时候就确定了宽度,所以我的想法是监听右边宽度大小去updata一下.但是我用vue的watch监听$refs.swiper.offsetwidth失败了!!!!但是宽度确实是在改变的很费解,先说一下解决方法把 1.使用element-resize-detector var elementResize

  • android 监听网络状态的变化及实战的示例代码

    android 监听网络状态的变化及实战的示例代码

    平时我们在请求错误的情况下,通常会进行处理一下,一般来说,主要分为两方面的错误 没有网络的错误 在有网络的情况下,我们客户端的错误或者服务器端的错误 今天这篇博客主要阐述以下问题 怎样监听网络状态的变化,包括是否打开WiFi,否打开数据网络,当前连接的网络是否可用 网络没有打开情况下的处理,如弹出对话框,跳转到 打开 WiFi设置的界面等 非WiFi情况下是否加载图片,是否播放视频等 实现思路 在网络错误的情况下获取网络状态进行判断,这种方法是可行的,但你想过了没有,如果每次都要进行这样的判断,

  • Android中检查、监听电量和充电状态的方法

    当你在更改后台更新频率来减少这些更新对电池寿命的影响时,检查当前电量和充电状态是一个好的开始. 电池寿命通过剩余电量和充电状态来影响应用更新的执行.当用交流电充电时,执行更新操作对设备的影响是微不足道的,所以在大多数案例里,你可以把更新频率调到最快.如果设备不在充电,降低更新频率可以帮助延长电池寿命. 类似的,你可以检查电池剩余电量级别,在电量低时,应该降低更新频率甚至停止更新. 注:此处的更新,指的是类似发送心跳包的动作,或者定时更新内容.并非仅仅指更新应用版本.如果是用户动作,比如翻页刷新,

  • Android监听软键盘弹出与隐藏的两种方法

    需求: 现在有一个需求是点击一行文本框,弹出一个之前隐藏的输入框,输入完成后按返回键或者其他的东西隐藏键盘和输入框,将输入框的内容填充到文本框中. 实现: 拿到这个需求的第一反应就是写一个监听来监听键盘的显示和隐藏来控制输入框的显示和隐藏,控制文本框中的内容. 所以我做了如下操作: 指定android:windowSoftInputMode="adjustResize|stateAlwaysHidden"这个的做法是为了让键盘弹出时改变布局. 让Activity实现Layoutchan

  • android 电话状态监听(来电和去电)实现代码

    实现手机电话状态的监听,主要依靠两个类:TelephoneManger和PhoneStateListener. TelephonseManger提供了取得手机基本服务的信息的一种方式.因此应用程序可以使用TelephonyManager来探测手机基本服务的情况.应用程序可以注册listener来监听电话状态的改变.我们不能对TelephonyManager进行实例化,只能通过获取服务的形式: Context.getSystemService(Context.TELEPHONY_SERVICE);

  • Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决

    一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期:</label> <div class="input-wrapper fr"> <input class="daterangepicker" ref="datepicker" v-model="dateRang

随机推荐