详解vue-router传参的两种方式

前端之家收集整理的这篇文章主要介绍了详解vue-router传参的两种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  1. 嵌套的路由/视图表
  2. 模块化的、基于组件的路由配置
  3. 路由参数、查询通配
  4. 基于 Vue.js 过渡系统的视图过渡效果
  5. 细粒度的导航控制
  6. 带有自动激活的 CSS class 的链接
  7. HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  8. 自定义的滚动条行为

v

ue-router传参两种方式:params和query

params、query是什么?

params:/router1/:id ,/router1/123,/router1/789,这里的id叫做params query:/router1?id=123,/router1?id=456,这里的id叫做query。

方法1:

query 方式传参和接收参数

传参:

接收参数:

this.$route.query.id

注意:传参是this.$router,接收参数是this.$route 两者区别:

$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

$route为当前router跳转对象,里面可以获取name、path、query、params等

方法2:

params方式传参和接收参数

传参:

接收参数: this.$route.params.id

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

二者还有点区别,可以理解为:query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

router.js

组件(传参):

{{ msg }}

组件(接收参数)

{{this.$route.params.userId}}或者{{this.$route.params.userId}}

总结

以上所述是小编给大家介绍的vue-router传参的两种方式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/30329.html

猜你在找的Vue相关文章