vue 跳转路由传参

     路由配置参数传递 

 <router-link tag="li" to="/news" active-class="active">新闻</router-link>
 <router-link tag="li" to="/sport/2" active-class="active">体育</router-link> 

     路由配置

{
       path:'info:id',
       component:info,
       name:'/info'
 }

 传递参数

     router-link -->
     <router-link tag="li" :to="'/info?id='+item.id" v-for="item in list" >{{item.title}}</router-link> 

接收参数

 商品id为{{$route.query.id}} 

编程试跳转

1.path + query   

  this.$router.push({ path: url, query: { id: 1 } });

  this.$router.push({ name: url.slice(1) });});

2. name+query

     this.$router.push({ name: url.slice(1), query: { id: 1 } });

传参

 goSport() {
      this.$router.push({ name: "sport", params: { id: 3 } });
    },

接收参数

{{$router.params.id}}

        

query 和params 传递参数的区别

1. params 地址栏不带参数  query地址栏带参数

2. params 刷新参数会丢失 query刷新不会丢失