gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1384
阅读:5243回复:1

vue-router路由传参的三种方法

楼主#
更多 发布于:2021-03-05 10:03
开发中经常遇到的需求是:


多个页面调用同一组件,通过传参获取不同的数据展示在页面上。多个路由映射到同个组件,只是传参不同,页面切换不会触发组件的创建cteated方法,怎么办?


官方给出的解决办法:


https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96


 通过watch(监测变化) $route 对象,将获取数据的方法写在watch里


具体尝试了以下几种方法都可实现:




方法一:query传参


router.js(路由配置)
{
   path: '/back',
   redirect: '/back/yjzx',
   component: viewport,
   children: [
     { path: 'yjzx', name: 'yjzx', component: article }
   ]
 }
Vue(其他页面调用)


<router-link :to="{name:'yjzx', query: {type: '1'}}" tag="li">
             <!--多个router-link的name一样或不一样都可,因为带的参数不一样--> <i class="fa fa-list-ul fa-fw"></i> <span>业界资讯</span> </router-link>


Vue(页面代码)
watch: {'$route' (to, from) {console.log(this.$route.query)}},





方法二:params传参

router.js(路由配置)

{
    path: '/back',
    redirect: '/back/yjzx',
    component: viewport,
    children: [
      { path: 'yjzx', name: 'yjzx', component: article }
    ]
  }




Vue(其他页面调用)



<router-link :to="{name:'yjzx', params: {type: '1'}}" tag="li">
  <!--多个router-link的name必须不一样,因为参数是以POST方式传递-->
<i class="fa fa-list-ul fa-fw"></i>
<span>业界资讯</span>
</router-link>

Vue(页面代码)


watch: {
'$route' (to, from) {
  console.log(this.$route.params)}
}



方法三:通过变量传参

router.js(路由配置)

{  
    path: '/back',
    redirect: '/back/yjzx/:type',
    component: viewport,
    children: [
      { path: 'yjzx/:type', name: 'yjzx', component: article }
    ]
}


Vue(其他页面调用)

<router-link :to="{path:'/back/yjzx/1'}" tag="li"><!--多个router-link的name一样或不一样都可,因为参数不同-->
<i class="fa fa-list-ul fa-fw"></i>
<span>业界资讯</span>
</router-link>

Vue(页面代码)

watch: {
    '$route' (to, from) {
         console.log(this.$route.params)
    }
}
gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1384
沙发#
发布于:2021-03-05 10:08
/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params
/data?id=1 /data?id=2 这里的 id 叫 query当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。
这句话怎么理解呢?看下边:如果你要使用params传参,那么你的路由页面index.js必须带上参数,如下{path: '/detail/:id/', name: "detail", component: detail}
//这个details是传进来的组件名称 } 使用: 方法1:router-link 方法


2:this.$router.push({name:'details',params:{id:123}})
页面url显示结果是:http://localhost:8081/#/details/123如果你要使用query传参,那么你的路由页面index.js必须带上参数,如下
{path: '/detail',//这里不需要参入参数,参见上面的params写法 name: "detail", component: detail//这个details是传进来的组件名称 } 使用:


方法1:
router-link


方法2:
this.$router.push({name:'details',query:{id:123}})


方法3:
router-link 方法


4:this.$router.push({path:'details',query:{id:123}})


页面url显示结果是:http://localhost:8081/#/details?id=123这里看方法3,4,其实是对应方法1,2的,也就是说使用query方法,可以与path和name共用,2个都可以,但是params只能对应name。
要是想获取参数值:各自的获取方法是:
query和params分别是:
this.$route.query.idthis.$route.params.id顺便说一些参数是多个的情况
params传参,如果路由index.js如下:
{path: '/detail/:id/:name', name: "detail", component: detail//这个details是传进来的组件名称 }
那么跳转写法:this.$router.push({name:'detail',params:{id:123,name:'lisi'}})
游客


返回顶部