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

编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于Vue中this.$router和this.$route的区别及push()方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧

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

通过注入路由器,我们可以在任何组件内通过 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 并不属于这种情况。取而代之的是狼蚁网站SEO优化例子的做法,你需要提供路由的 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区别内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板