VueRouter路由组件传参
今天重新过了一遍VueRouter的文档,梳理和总结了一下关于路由组件传参的一些思路,记下来防止以后忘记。使用route-link传参<router-link :to="{name:'content',query:{name:123}}" >content</router-link><router-link :to="{name:'content',pa...
·
今天重新过了一遍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获取 有解耦的作用 推荐这种
更多推荐
已为社区贡献1条内容
所有评论(0)