v-router传参总结

废话：做了这么多项目，每次做到路由的时候，都很顺畅的用到各种方法传参，随意变换，但是又杂又乱，特意在此总结一下。如果大佬们有更好的或者更加规范的传参方式，也麻烦告知一下。

先总结：

常用的三种传参方式特点：
- 路径拼接传参：地址栏：`localhost:8080/user/123`；   刷新数据还在；参数在params对象；需配:id
- query+path  ：地址栏：`localhost:8080/user?id=123`；刷新数据还在；参数在query对象；
- parmas+name ：地址栏：`localhost:8080/user`；       刷新数据丢失；参数在params对象；需配name

一、路径拼接, 地址栏直接显示localhost:8080/user/123，重新刷新一遍就是重新请求一次，数据还可以用，需要在router/index.js路由配置 :id，拿数据时在route的params对象。

// 路由
{ 
    path: '/user/:id', //注意必须要写:参数名 
    component: () => import('user')
}
// 跳转
this.$router.push('user/'+this.id);
// 接收参数 
created() {
    console.log(this.$route.params.id);
}

注意：如果是要多个参数，那么直接`/user/:id/:name`,接收时`this.$route.params`返回对象拿到对应键即可

二、query+path，类似于get请求那样，地址栏：localhost:8080/user?id=123，数据对象放在query对象。

// 路由
{ 
    path: '/user', //注意这里就不需要:id了
    component: () => import('user')
}
// 跳转
this.$router.push({
    path: "/user",
    query: { id:this.id } 
});
// 接收参数 
created() {
    console.log(this.$route.params); 
}

三、params+name，类似于post请求，地址栏不会显示参数，拿数据时在route的params对象。需要配置路由的name。重新刷新一遍params对象数据空了，因为post请求也是这样，不允许直接在地址栏上打。

{ 
    path: '/user', //注意这里也不需要:id了
    name: 'user',  //注意但是这里需要用到name
    component: () => import('user')
}
// 跳转
this.$router.push({
    name:'user'
    params: { id:this.id } 
});
// 接收参数 
created() {
    console.log(this.$route.params); 
}