我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue中this.$router和this.$route的区别及push()方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue中this.$router和this.$route的区别及push()方法

官房文档里是这样说明的:

通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由

可以理解为:

this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。

this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, params, query 等属性。

关于 push() 方法:

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。

push() 方法的调用:


    //字符串
    this.$router.push('home')
 
    //对象
    this.$router.push({path:'home'})
 
    //命名的路由
    this.$router.push({name:'user', params:{userId: '123'}})
 
    //带查询参数,变成 /register?plan=private
    this.$router.push({path:'register', query:{plan:private}})

注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:


    const userId = '123';
 
    this.$router.push({path:`/user/${userId}`});  //->/user/123
 
    this.$router.push({name:'user', params:{userId}});  //->/user/123
 
    //这里的 params 不生效
    this.$router.push({path:'/user', params:{userId}});  //->/user

同样的规则也适用于 router-link 组件的 to 属性。

总结:

params 传参,push 里面只能是 name:'xxx',不能是 path:'/xxx',因为 params 只能用 name 来引入路由,如果这里写成了 path ,接收参数页面会是 undefined。 

路由传参的方式:

1、手写完整的 path: 


    this.$router.push({path: `/user/${userId}`});

    获取参数:this.$route.params.userId 

2、用 params 传递:  


    this.$router.push({name:'user', params:{userId: '123'}});

    获取参数:this.$route.params.userId 

    url 形式:url 不带参数,http:localhost:8080/#/user 

3、用 query 传递: 


    this.$router.push({path:'/user', query:{userId: '123'}});

    获取参数:this.$route.query.userId 

    url 形式:url 带参数,http:localhost:8080/#/user?userId=123

直白的说,query 相当于 get 请求,页面跳转的时候可以在地址栏看到请求参数,params 相当于 post 请求,参数不在地址栏中显示。

要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

总结

到此这篇关于Vue中this.$router和this.$route的区别及push()方法的文章就介绍到这了,更多相关Vue中this.$router和this.$route区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue中this.$router和this.$route的区别及push()方法

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

下载Word文档

猜你喜欢

vue中$route和$router的区别是什么

今天就跟大家聊聊有关vue中$route和$router的区别是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。路由的设置和跳转中有两个对象$router和$route,是不是很像
2023-06-25

vue中$router和$route的区别有哪些

这篇文章主要介绍了vue中$router和$route的区别有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。我们在 vue 项目中一般都会用到路由,而 vue-route
2023-06-15

Vue中的computed和watch用法及区别

Vue中的computed和watch都可以监听数据变化,但computed主要用于计算派生属性,而watch则用于监听特定数据变化并执行回调函数。两者使用时需要注意区别
2023-05-17

vue中this.$router.push()路由传值和获取的两种常见方法汇总

这篇文章主要介绍了vue中this.$router.push()路由传值和获取的两种常见方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-15

vue中全局方法和实例方法的区别有哪些

这篇文章主要介绍“vue中全局方法和实例方法的区别有哪些”,在日常操作中,相信很多人在vue中全局方法和实例方法的区别有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中全局方法和实例方法的区别有哪些
2023-06-22

Android中invalidate()和postInvalidate() 的区别及使用方法

Android中实现view的更新有两组方法,一组是invalidate,另一组是postInvalidate,其中前者是在UI线程自身中使用,而后者在非UI线程中使用。 Android提供了Invalidate方法实现界面刷新
2022-06-06

vuex中store.commit和store.dispatch的区别及使用方法

这篇文章主要介绍了vuex中store.commit和store.dispatch的区别及使用方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-01-10

Java中StringRedisTemplate和RedisTemplate的区别及使用方法

本文主要介绍了Java中StringRedisTemplate和RedisTemplate的区别及使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2023-05-15

Javascript 中 var 和 let 、const 的区别及使用方法

ECMAScript变量是松散类型的,意思是变量可以用于保存任何类型的数据,每个变量只不过是一个用于保存任意值的命名占位符,这篇文章主要介绍了Javascript 中 var 和 let 、const 的区别以及具体使用效果,需要的朋友可以参考下
2023-01-13

PHP中静态方法和抽象方法的区别及应用场景

PHP中静态方法和抽象方法都是面向对象编程中重要的概念,它们分别有着不同的特点和应用场景。本文将具体介绍PHP中静态方法和抽象方法的区别,并给出相应的代码示例来帮助读者更好地理解这两种方法的用法。一、静态方法静态方法是定义在类中的一个特
PHP中静态方法和抽象方法的区别及应用场景
2024-03-05

C语言中*和&的区别及使用方法详解

在 c 语言中, 用于解引用指针,返回指向的值;&amp;amp;amp;amp;amp;amp; 用于取地址,返回指向该变量的指针。 通常用于访问或修改指针所指向的值;&amp;amp;amp;amp;amp;amp; 通
C语言中*和&的区别及使用方法详解
2024-04-03

Node.js中同步和异步编程的区别及使用方法

在Node.js中,同步和异步编程是两种不同的处理方式。同步方式会阻塞程序的执行,而异步方式则不会。通过掌握它们的区别和使用方法,可以更好地实现程序的性能优化和功能扩展。同时,需要注意异步编程中的回调地狱问题,使用Promise可以更好地处理异步编程
2023-05-18

编程热搜

目录