vue路由傳參的三種方式

方式一：

參數顯示在地址欄上的

（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;
      });
  }

 

方式二：

參數不顯示在地址欄上的

（1）.在<router-link>標簽中，使用params對象

<div>
    <router-link :to="{name:'Home'}"><span>home</span></router-link>
    <router-link :to="{name:'Test',params:{id:3,name:'za',age:12}}"><span>Test</span></router-link>
    <router-link :to="{name:'News'}"><span>News</span></router-link>
</div>

（2）.在組件中獲取

<div>
    <!-- 在router-link標簽中的params不能在created打印，只能直接在{{}} 中輸出,如果是在控制台打印，那么會是undefined -->
     {{$route.params.id}}
     {{$route.params.name}}
     {{$route.params.age}}
</div>

 

方式三：

參數顯示在地址欄上，並用?號和&號拼接的

（1）在router-link中，用to=‘/xxx?params1='xxx'&params2='yyy'’

<router-link to="/test?test=zs&age=12"><span>Test</span></router-link>

 

(2) 使用query獲取路由參數 this.$route.query.xxx

  console.log(this.$route.query);

 

區別：

什么時候用this.$route.params.xxx ? 什么時候用this.$route.query.xxx ?

參數是對象的時候用this.$router.params.xxx 

參數是字符串拼接的時候用this.$router.query.xxx