vue params、query传参使用详解

网友投稿 372 2023-04-05


vue params、query传参使用详解

最近在学习vue,本文介绍了vue params、query传参使用,分享给大家,也给自己留个笔记

声明式:

编程式:router.push(...)

这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数。

1、router.push使用

router/index.js

export default new Router({

routes: [

{

path: '/',

name: 'A',

component: require('../components/A')

},

{

path: '/B/:name/:age',

name: 'B',

component: require('../components/B')

}

]

})

上边,在路由中为B组件添加两个参数 name ,age

A组件,绑定一个@click事件,跳转B组件传参 使用params

{{message}}

跳转B组件啊啊

这时浏览器会显示 :http://localhost:8080/#/B/xy/22

在看下query  传值及地址变化

同样在 router/index.js路由文件中 不变有两个参数name,age

{

path: '/B/:name/:age',

name: 'B',

component: require('../components/B')

}

在A组件中,之前参数传递是通过params,

this.$router.push({name:'B',params:{name:'xy',age:22}});

替换后,query

this.$router.push({name:'B',query:{name:'xy',age:22}});

这时浏览器会发现:http://localhost:8080/#/?name=xy&age=22

通过以上两种,页面刷新后,参数还会保留的。

获取值有些不相同:

params:this.$route.paramLeOgZzoMjEs.name;

query:this.$route.query.name;

------------------------ 还有种方式--------------------------------------------

使用 router-link

跳转B组件

跳转后,浏览器地址为:http://localhost:8080/#/B?name=zzz&age=22

跟  this.$router.push(...) 是一样的

跳转B组件

{

path: '/B/:name',

name: 'B',

component: require('../components/B')

}

取值

this.$route.params.name


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java排序算法之_选择排序(实例讲解)
下一篇:vue proxyTable 接口跨域请求调试的示例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~