vue路由跳转传递参数方式
vue中点击页面跳转传参,可以通过设置params 与query
params方式
获取params传值方式 this.$route.params.xxx ,
1 在路由配置文件中设置在path中。
{
routes: [
{
path: "/news/:type? // ? 表示type可选,可传可不传
component: News,
props: true
},
...
]
}
2 <router-link
:to="{name:'news',params:{type:'sports'}}"
>
体育新闻
</router-link>
ps:该router-link情况下,params在name指定情况下使用,不能通过指定path情况使用
3 通过在this.$router.push等方法下使用
query方式
获取params传值方式 this.$route.query.xxx
1 指定在router-link
<router-link
:to="{path:'/news',query:{type:'sports'}}"
>
体育新闻
</router-link>
2 通过在this.$router.push等方法下使用
不管是params query,为了与this.$route解耦 ,可以利用上面的指定props的方式,通过属性获取
,