vue-router传参的方式是什么

这篇"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. 自定义的滚动条行为

vue-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.$router.push({       path:'/openAccount',       query:{id:id}     });

接收参数：

this.$route.query.id

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

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

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

方法2：

params方式传参和接收参数

传参：

  this.$router.push({       name:'/openAccount',       params:{         id: id       }     })

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

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

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

router.js

export default new Router({ routes: [  {   path: '/',   name: 'login',   component: Login  },  {   path: '/register',   name: 'register',   component: Register  }})

组件（传参）：

组件（接收参数）

以上就是关于"vue-router传参的方式是什么"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。