广告
返回顶部
首页 > 资讯 > 前端开发 > html >nuxt.js怎么监听路由
  • 309
分享到

nuxt.js怎么监听路由

2024-04-02 19:04:59 309人浏览 薄情痞子
摘要

这篇文章主要介绍“nuxt.js怎么监听路由”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nuxt.js怎么监听路由”文章能帮助大家解决问题。需求:在当前页面点击某

这篇文章主要介绍“nuxt.js怎么监听路由”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nuxt.js怎么监听路由”文章能帮助大家解决问题。

需求:在当前页面点击某个类目,更换路由参数

例如:从这个路由 /detail?targetId=2,更换成 /detail?targetId=3

这个时候,我第一想到的是 watch 监听路由,但是由于是服务端渲染,第一次是拿不到 this 对象,老是报 this.$axiOS 不存在

所以这个时候,查到文档中的 watchQuery

api: The watchQuery Property

  watchQuery(newQuery, oldQuery) {

    console.log(this)

    let detail

    if(this) {

      detail = (this.$axios.get(——${detailUrl}${newQuery.targetId}——)).data

      console.log("newQuery", newQuery, oldQuery, this)

    }

    return {

      detail

    }

  },

这里有个大坑就是 detail 要返回出去

关于“nuxt.js怎么监听路由”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网html频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: nuxt.js怎么监听路由

本文链接: https://www.lsjlt.com/news/91094.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • nuxt.js怎么监听路由
    这篇文章主要介绍“nuxt.js怎么监听路由”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nuxt.js怎么监听路由”文章能帮助大家解决问题。需求:在当前页面点击某...
    99+
    2022-10-19
  • vue如何监听路由
    在vue中监听路由的方法有:1.使用watch方法监听;2.使用watch方法监听路由变化,并获取路由信息;3.使用beforeEach方法全局监听;4.使用beforeRoute方法在组件内部监听具体方法如下:使用watch方法监听路由w...
    99+
    2022-10-18
  • AngularJS如何监听路由变化
    这篇文章将为大家详细讲解有关AngularJS如何监听路由变化,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用AngularJS时,当路由发生改变时,我们需要做某些处理...
    99+
    2022-10-19
  • 如何使用watch监听路由变化和watch监听对象
    这篇文章主要介绍了如何使用watch监听路由变化和watch监听对象,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、watch监听路由变化...
    99+
    2022-10-19
  • 详解JavaScript实现监听路由变化
    目录historypushState()方法pushState()使用场景replaceState() 方法popstate事件pushState和replaceState如何监听呢...
    99+
    2022-11-12
  • vue监听路由变化的几种方式小结
    目录监听路由变化的几种方式小结一、监听路由从哪儿来到哪儿去二、监听路由变化获取新老路由信息三、监听路由变化触发方法四、全局监听路由如何在组件中监听路由参数的变化?方式一: 监听 $r...
    99+
    2022-11-13
  • 关于vue路由监听事件跳转的问题
    目录vue路由监听事件跳转1.监听路由触发事件的语法2.可能遇到的问题vue路由监听不到怎么办方法一方法二方法三vue路由监听事件跳转 1.监听路由触发事件的语法  watch: {...
    99+
    2022-11-13
    vue路由监听 vue路由跳转 vue路由监听事件
  • 怎么在Vue中利用路由监听实现同页面动态加载
    怎么在Vue中利用路由监听实现同页面动态加载?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。watch: {   &nbs...
    99+
    2023-06-15
  • Vue路由监听实现同页面动态加载的示例
    目录场景分析 开发 总结 场景分析 在系统中一个模块有三个子模块. 业务数据中可以直接根据类型去区分这个三个子模块的归属. 通常情况下.我们是写在同一个模块中然后去选择业务类型. ...
    99+
    2022-11-12
  • Android开发怎么实现Chip监听及ChipGroup监听
    这篇文章主要介绍“Android开发怎么实现Chip监听及ChipGroup监听”,在日常操作中,相信很多人在Android开发怎么实现Chip监听及ChipGroup监听问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对...
    99+
    2023-07-02
  • watch监听怎么实现
    本篇内容主要讲解“watch监听怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“watch监听怎么实现”吧! 父传子;父组件通过:purchaserId...
    99+
    2022-10-19
  • Vue3.0中怎么监听props
    这篇文章主要讲解了“Vue3.0中怎么监听props”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3.0中怎么监听props”吧!Vue3.0监听props的方法第一种直接监听这个pr...
    99+
    2023-06-30
  • ssl监听端口怎么改
    ssl监听端口的修改示例:打开nginx配置文件,例如:“/etc/nginx.conf”。在文件里的“http{}”声明内找到“listen”,后面就是当前监听的端口,修改配置文件,重启nginx服务即可,文 件内容如下:server {...
    99+
    2022-10-04
  • java怎么监听binlog日志
    要监听binlog日志,可以使用MySQL的binlog监听工具。以下是使用Java进行binlog日志监听的一个示例: 首先,...
    99+
    2023-10-25
    java
  • vue监听路由变化时watch方法会执行多次的原因及解决
    目录需求描述: 需求解析: 解决需求 问题解决 本人前端菜鸟一名,一直致力于不间断的生产管理后台的bug,并以此自勉自励。近几天接到一个需求,网上也搜了很多例子,但是没有从根本上解决...
    99+
    2022-11-12
  • angular怎么监听数据变化
    在Angular中,可以使用Angular的Change Detection机制来监听数据的变化。 使用双向数据绑定:双向数据绑...
    99+
    2023-10-24
    angular
  • 使用Spring怎么监听事件
    使用Spring怎么监听事件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一、观察者模式先来看下观察者模式,举个例子警察和军人是观察者,犯罪嫌疑人是被观察者代码实现:定义被观察...
    99+
    2023-06-15
  • python怎么实现监听键盘
    小编给大家分享一下python怎么实现监听键盘,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Python的优点有哪些1、简单易用,与C/C++、Java、C# 等...
    99+
    2023-06-14
  • Java监听器ActionListener怎么使用
    ActionListener是一个接口,用于处理按钮点击事件。要使用ActionListener,需要实现这个接口并实现它的抽象方法...
    99+
    2023-08-16
    Java
  • Java监听器MouseListener怎么使用
    在Java中,使用MouseListener监听器来处理鼠标事件。MouseListener接口定义了五个方法,分别是:1. `vo...
    99+
    2023-08-16
    Java
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作