1. 程式人生 > >Vue router-link 兩種傳參方法及引數的使用

Vue router-link 兩種傳參方法及引數的使用

1.路徑:http://localhost:8080/#/detail?detail_id=1

<router-link :to="{path:'/detail',query: {detail_id: id}}">跳轉</router-link>  (id是引數值)

js中使用獲取引數值:

this.$route.query.id

2.路徑:http://localhost:8081/#/detail/1

<router-link :to="'/detail/'+id">跳轉</router-link>  (id是引數值)

路由配置:

{ 

   path:'/detail/:id',

   name:'Detail',

   component:DetailComponent

}

注意:router-link中連結如果是‘/’開始就是從根路由開始,如果開始不帶‘/’,則從當前路由開始

js中使用獲取引數值:

 this.$route.params.id //這個id是路由的配置id