vue路由跳转传递参数方式

2020-06-11  本文已影响0人  说好的幸福2020

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的方式,通过属性获取

上一篇下一篇

猜你喜欢

热点阅读