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