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

Posted 2021-01-30 cap-rq

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

因此，就需要在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相同，参数不同，点击之后没有效果

 

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