前阵子用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 }})
网友评论