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都可以 

动态路由传参

 

route.js
{
      path: '/ChildContent/:id/post/:name',
      component: ChildContent,
      name:"ChildContent",
      props:true  //此时params就是组件的props
}
执行跳转的组件
var param={name:{name:"111",age:"222",grade:"一年级"},age:12}
this.$router.push({path:"ChildContent/123/post/456",query:param}) 
跳转到的组件
 mounted(){
        console.log(this.$route);
        console.log(this.id,this.name);
    },
 props:["name","id","params"]

打印结果

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