2019-05-09写写路由跳转带参数的区别吧

2019-05-09  本文已影响0人  毛毛_000e

前阵子用vue做后台管理项目,因为是第一次用并且项目又很急着交付测试,所以开发的过程中遇到不会的都是百度,边学边写,最后项目是做出来了,但是很多关于vue的知识都是松散片面的。现在项目做完了,赶紧重新认真看了一下vue-router的官方文档,把路由跳转、带参数这块的知识做个记录总结。

1、params。可以在vue-router的路由路径中使用动态路径参数routes:[{ path:'/user/:id',component:User }],想要导航到不同的URL,使用编程式导航时的写法是:router.push({ name:'User', params:{ id:' 123 ' } }),需要注意的是,如果提供了path,params会被忽略,需要提供路由的name,或者手写完整的带有参数的path,等价写法是:router.push({ path:`/User/${id}`})。当匹配到一个路由时,参数值就会被设置到this.$router.params,可以在每个组件内使用$router.params.id访问。也可以通过props解耦,在路由文件中routes:[{ path:'/user/:id',component:User, props:true}],即添加了props:true,在组件内部route.params将会被设置为组件属性,使用时,记得添加props属性:props:[ 'id' ]

2、query。表示url查询参数,使用query,路由将会以/user?id=123的形式展示 :router.push({ path:' user ', query:{ id:123 }})

上一篇下一篇

猜你喜欢

热点阅读