VueRouter路由组件传参

本文主要是介绍VueRouter路由组件传参，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天重新过了一遍VueRouter的文档，梳理和总结了一下关于路由组件传参的一些思路，记下来防止以后忘记。

使用route-link传参

<router-link :to="{name:'content',query:{name:123}}" >content</router-link>

<router-link :to="{name:'content',params:{name:123}}" >content</router-link>

<router-link :to="{path:'/content',query:{name:123}}" >content</router-link>

•  使用path路径跳转 传参必须使用query 使用命名视图跳转 params和query都可以 
• 使用params如果路由路径上没有参数接收 刷新页面数据会丢失，使用query会把参数显示在地址栏路径上，此时刷新数据数据不会丢失

 使用编程式导航传参

  普通传参

var param={name:{name:"111",age:"222",grade:"一年级"},age:12}

this.$router.push({name:"ChildContent",params:param})

this.$router.push({name:"ChildContent",query:param})

this.$router.push({path:"/ChildContent",params:param})

•  同上 使用path路径跳转 传参必须使用query 使用命名视图跳转 params和query都可以 

动态路由传参

 

1. route.js

2. {

3. path: '/ChildContent/:id/post/:name',

4. component: ChildContent,

5. name:"ChildContent",

6. props:true //此时params就是组件的props

7. }

8. 执行跳转的组件

9. var param={name:{name:"111",age:"222",grade:"一年级"},age:12}

10. this.$router.push({path:"ChildContent/123/post/456",query:param})

11. 跳转到的组件

12. mounted(){

13. console.log(this.$route);

14. console.log(this.id,this.name);

15. },

16. props:["name","id","params"]

17.  

打印结果

• 此时刷新params数据不会丢失 因为在路由路径上有对应的数据 比方上面的id和name
• 在router对象中有props选项 会让传递的params参数当做跳转到页面props中的参数 不需要通过this.$route获取 有解耦的作用 推荐这种

这篇关于VueRouter路由组件传参的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---