1. 程式人生 > >vue的路由參數傳遞和獲取路由參數

vue的路由參數傳遞和獲取路由參數

path component this itl then pos 形式 .com data

1.在路由中配置path, 形式:path:"/xxx/:param" , 斜線+冒號+參數

 {
      name:"Blog",
      component:Blog,
      path:"/blog/:id"
    },

2.在router-link標簽用to綁定路由,:to=" ‘/blog/‘+param " ,路由部分要加單引號

 <div class="box" v-for="(item,i) in getSearch">
        <router-link :to="‘blog/‘+(i+1)">
        <
h3>{{item.title}}</h3> <p>{{item.body}}</p> </router-link> </div>

3.獲取路由參數

點擊帶有參數的路由,地址欄會帶有對應的參數:

技術分享圖片

獲取這個參數,然後通過接口傳遞給後臺,返回對應參數的數據,this.$route.params.xxx

  created() {
    this.$axios
      .get("http://jsonplaceholder.typicode.com/posts/" + this
.$route.params.id) .then(res => { console.log(res); this.blog = res.data; }); }

vue的路由參數傳遞和獲取路由參數