vue.js学习时watch里指定的值为this.$route没有输出内容的问题

最新推荐文章于 2023-08-25 11:02:00 发布
最新推荐文章于 2023-08-25 11:02:00 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44846451/article/details/104519467
版权

在学习watch监视路由地址变化时，我将指定监视的值设置为this.$route
然后发现，当路由地址改变是并没有输出任何数据
在这里插入图片描述

于是我翻了下前面做的关于this.$route的使用的代码，发现在组件的data中设置返回值时使用this是没有问题的。
在这里插入图片描述
于是开始思考会不会是this指向的问题。

随后发现，虽然在组件中，这个this指向的是组件本身，也就是一个vue实例。但因为这是在data里拿，而这个data是一个函数（虽然没有写function），所以需要加上this指向vue实例。而watch本身的指向就是vue实例，所以不需要额外加上this来指向Vue实例。

所以只需要把this去掉就能正常输出了
在这里插入图片描述

（小白，欢迎大佬指正）

叶枫尘
关注
typescript vuex_优雅的在vue中使用TypeScript
weixin_39726697的博客
10-21 576
引言近几年前端对 TypeScript的呼声越来越高，Typescript也成为了前端必备的技能。TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。在单独学习 TypeScript时，你会感觉很多概念还是比较好理解的，但是和一些框架结合使用的话坑还是比较多的，例如使用 React、Vue 这些框架的时候与 TypeScript...
vue this.$route和this.$router到底有什么关系！
qq_36818931的博客
12-31 975
文章目录前言一、vue中this.$route是什么？二、vue中this.$router是什么？三、二者的区别与联系总结 前言 一、vue中this.$route是什么？ vue中this.$route是组件内的路由对象，包含 我在控制台打印了this.$route 可见this.$route具有以下属性： 属性名 属性类型 属性说明 示例 fullPath string 完成解析后的 URL，包含查询参数和 hash 的完整路径 hash string 当前路由的 h.
watch一个路由对象this.$route
回纹勾边宝相花团
05-29 7202
问题来源： https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/login/index.vue watch: { $route: { handler: function(route) { const query = route.query if (query...
vue里面watch监听当前路由信息
qq_41497443的博客
01-27 2008
vue里面watch监听当前路由信息
使用vue路由信息对象$router时router.js中包含此路由却出现This page could not be found
Bab的博客
12-03 9298
引起此问题的原因是路由路径不正确引起(例如this.$router.push({ path: '/pay/' + this.order.orderNo })的pay前面少了"/")，虽然浏览器的地址栏中显示正常，但是本次使用的是nuxtjs，好似被它解析忽略。
Vue 中使用watch监听$route 无效问题
杨振洲的博客
07-21 4942
Vue 中使用watch监听$route失效问题！ 路由： { name: 'secondUser ', component: secondUser, path: '/secondUser', } ------------------------------------------------------------------------------------------------------------------- 页面中监听 watch:{
vue项目使用$router.go(-1)返回时刷新原来的界面操作
10-15
在使用Vue.js开发前端项目时，我们经常需要处理页面间的导航跳转与状态管理。在页面间导航时，Vue Router提供了控制路由行为的方法，其中`$router.go(-1)`是一个常用的操作，它可以让用户返回到浏览器历史记录中的上...
vue.js获取数据库数据实例代码
10-19
在Vue实例创建时（`created`钩子函数中）和路由变化时（使用`watch`监听`$route`），调用`fetchData`方法获取数据。 ```javascript // Home.vue组件内容 export default { data() { return { user: null, }; }...
vue.js vue-router如何实现无效路由(404)的友好提示
11-27
在构建Vue.js单页应用程序（SPA）时，路由管理是一个至关重要的部分，Vue Router作为官方推荐的路由库，提供了一套完整的解决方案。然而，当用户尝试访问未定义的路由时，通常会出现404错误，这给用户体验带来不理想...
2022-02-09 面试题:vue(三) $router和$route的区别,computed和watch的区别
GAARA
02-09 402
1.$router和$route的区别? 回答 $router是VueRouter的实例,相当于一个全局的路由对象 里面包含很多个属性和子对象,比如history,和常用的跳转链接this.$router.push $route对象表示当前的路由信息,包含了当前URL解析得到的信息,包含当前的路由,参数和query对象等等 补充 1.$router常用api: ① this.$router.push('hash 地址') 跳转到指定 hash 地址，并增加一条历史记录 ② this.$router.go
vue 路由监听的方式
coldriversnow的专栏
08-25 1613
【代码】vue 路由监听的方式。
Vue watch $route时的箭头函数
许珊珊同学的专栏
05-06 697
和function不同之处
vue监听路由发生变化（watch）
inexaustible的博客
12-22 785
修改（通过id查询数据信息用于回显）/ 添加（将表单数据清空）。 多次路由跳转到同一个页面，在页面中created方法（页面渲染之前执行）只会执行一次，后面在进行跳转不会执行的。 vue监听： watch:{ $route(to,from){ //路由发生变化执行下面的方法 this.init() //调用需要执行的方法 } } methods:{ init(){ //...
vue页面已经跳转，但是watch获取不到$route
OldStreet61的博客
09-03 7190
1、问题描述： 在开发的时候使用 this.$router.push({path:"/test",query:{name:"test"}}) 进行页面跳转， 页面已经跳转至test了，并且路由显示"test?name='test' " （1）watch监听获取 $route(to, from) { console.log(this.$route);//打印空对象，获...
Vue关于组件路由守卫无法获取this
neverGV的博客
06-17 2297
今天在写一个组件时候用到了组件路由守卫，但是在赋值时无法将路由中query的值绑定到组件的this中，这是因为 const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) {
vue2的监听watch小爆料
weixin_33979363的博客
08-25 150
此文首发于lijing0906.github.io 跟vue相爱相杀这么久了，今天第一次来爆点小料(主要还是为自己做笔记)------vue2的watch监听 路由监听,也适用于普通变量（基本数据类型）的监听 写法一,普通监听 watch: { $route(nVal, oVal){ console.log(nVal) //打印的是路由对象 ...
【Vue项目】watch中为什么取不到this？？？
feng的博客
08-17 1784
箭头函数绑定了父级作用域的上下文，从而不会拿到Vue实例。所以在使用watch设置监听的时候，handler函数不应该使用箭头函数。运行结果：Error "$nextTick" ........输出一下this，发现是undefined。1.问题重现：先来看下这段代码。
Vue2不用this获取route对象，而非router配置实例
Aubrey.J的博客
05-19 1970
需求是在axios中获取当前页面路由信息，没有this.$，所以要使用其他方式获取route和router，不使用this获取路由实例router和路由信息对象route
vue 深度监听 this.$route.query
最新发布
09-28
Vue 中深度监听 `this.$route.query` 可以用于实时获取路由查询参数的变化，并作出相应的处理。通常，你可以通过设置一个响应式数据来实现这个功能，比如使用 Vue 的 `watch` 或者第三方库如 `vue-watch-component`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值