每天一点点之vue框架开发 - vue-router路由在循环中携带参数

标签：item   class   没有   params   this   www.   span   分享   idt   

场景：要实现一个标签云，通过循环把标签渲染，然后单击标签的时候实现跳转，跳转路由一样，通过唯一参数来实现请求不同的数据

因此，就需要在for循环中来携带参数，本节所讲的是路由使用对象的形式（别名）来实现的

<router-link :to="{name:‘blogDetailsLink‘} ></router-link >

如果你也是这种情况，那你就可以继续往下看了

1.在home.vue中代码实现携带参数

<li v-for="item in laber_cloud" >
       <router-link :to="{name:‘blogDetailsLink‘,params:{id:item.id}}" >{{item.name}}</router-link>
</li>

2.路由：

{ path: ‘/home/blogDetails‘, name: ‘blogDetailsLink‘, component: BlogDetails }, 

3.blogDetails.vue中获取参数

// 在html中获取
{{$route.params.id}}

// 在js中获取
this.$route.params.id

这样就实现在循环中给url携带参数，但是这样有一个问题，就是url相同，参数不同，点击之后没有效果

如果你出现这种 路由相同参数不同不能跳转的问题，那么你可以点我查看详情

每天一点点之vue框架开发 - vue-router路由在循环中携带参数

标签：item   class   没有   params   this   www.   span   分享   idt   

原文地址：https://www.cnblogs.com/cap-rq/p/10183630.html