1. 程式人生 > >vue-router路由帶參

vue-router路由帶參

router,router-link兩種跳轉方式的帶參

首先一定要在router的配置資訊index中設定name屬性

  1. path -> 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航
  2. params -> 是要傳送的引數,引數可以直接key:value形式傳遞
  3. query -> 是通過 url 來傳遞引數的同樣是key:value形式傳遞
router-link方式
<router-link:to="{
path: 'yourPath',      //如果要用params傳值需要把path改為name
params: {
name: 'name',
dataObj: data
},
query: {
path: 'name',
dataObj: data
}
}">
</router-link>

router方式跳轉
template中觸發路由方法
         <li>
 		 		<a @click="gosearch(m.leibienum,m.text)" class="swTypeList" >
 		 			<p>{{m.text}}</p>
 		 		</a>
 		 </li>
script中
  gosearch(id,text_){
  this.$router.push({
  path:'/search',
  name:'search',
  params:{
            num_:id,
            p_id:2,
            na:text_,
              }
  })
  }
query呢 把上述程式碼的params改成query就好了 但是位址列會顯示傳的值