vue2.x的学习之路--vue路由的传值

方法一：
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

const routes = [
  { path: '/home', component: Home },
  { path: '/new', component: New },
  { path: '/details/:id', component: Details },
  { path:  '*', redirect: '/home' }

]


 main.js=>{ path: '/details/:id', component: Details },
 
 b组件=><li ><router-link to="/details/12">12</router-link></li>
 或者动态的参数传值：<router-link :to="'/details/'+key">12</router-link>
 
 details组件=>mounted(){
         console.log(this.$route.params);
    }


方法二：

main.js=> { path: '/detailsGet', component: DetailsGet },
a组件 => 
<router-link :to="'/detailsGet?a='+msg">Go to DetailsGet</router-link>
detailsGet组件=> mounted(){
         console.log(this.$route.query);
    }
    msg如果要传对象数组的话要序列化
   


方法三：

 还可以这么用  不用转序列化
 { path: '/detailsGet', component: DetailsGet ,name:'user'},
  name 是别名， 可以起可以不起，
  使用的是 ：this.$route.query
 <router-link :to="{ path: '/detailsGet', query: { userId: '123' }}">Go to DetailsGet</router-link>
 <router-link :to="{ name: 'user', query: { userId: '123' }}">Go to DetailsGet</router-link>
 detailsGet组件=> mounted(){
         console.log(this.$route.query);
    }


方法四：
{ path: '/detailsGet', component: DetailsGet ,name:'user'},
  name 是别名， 注意如果使用的是 params 则一定要用别名 不能是path  不然传不了参数
  使用的是 ：this.$route.params
 <router-link :to="{ name: 'user', params: { userId: '123' }}">Go to DetailsGet</router-link>
 detailsGet组件=> mounted(){
         console.log(this.$route.params);
    }