每天一點點之vue框架開發 - vue-router路由在循環中攜帶參數

場景：要實現一個標簽雲，通過循環把標簽渲染，然后單擊標簽的時候實現跳轉，跳轉路由一樣，通過唯一參數來實現請求不同的數據

因此，就需要在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相同，參數不同，點擊之后沒有效果

 

如果你出現這種 路由相同參數不同不能跳轉的問題，那么你可以點我查看詳情