vue-router:组件传参方式

1. url传参：

   //参数传递
   <li v-for="(item,index) in items" :key="index">
       <router-link :to="'/user'+(key+1)">to user</router-link>
   </li>
   
   //参数接收
   {{this.$route.params.id}}

2. 声明式传参：

   ​
   //参数传递
   <li v-for="(item,index) in items" :key="index">
       <router-link :to={name:'/user',params:{id:"声明传参"+(key+1)}>to user</router-link>
   </li>
   
   //参数接收
   {{this.$route.params.id}}
   
   ​

3. query传参

   ​
   ​
   //参数传递
   <li v-for="(item,index) in items" :key="index">
       <router-link :to={name:'/user',query:{id:"query传参"+(key+1)}>to user</router-link>
       //  在query传参时，name:'/user'可替换为path:'/user'
   </li>
   
   //参数接收
   {{this.$route.query.id}}
   
   ​
   
   ​

    

4. 编程式导航传参

   this.$router.push({name:'/user',
                      params:{id:id}
   })
   
   params必须和name搭配使用，不能和path搭配。
   query，都可搭配。

    

5. 路由懒加载

   component:()=>import('./view/user.vue')