详解vue-router传参的两种方式
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
vue-router传参两种方式:params和queryparams、query是什么? params:/router1/:id ,/router1/123,/router1/789,这里的id叫做params query:/router1?id=123,/router1?id=456,这里的id叫做query。 方法1:query 方式传参和接收参数 传参: 接收参数:
注意:传参是this.$router,接收参数是this.$route 两者区别: $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法 $route为当前router跳转对象,里面可以获取name、path、query、params等 方法2:params方式传参和接收参数 传参: 接收参数: 注意: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传参的两种方式。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |