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对象。

// 路由 router/index.js
{ 
    path: '/user/:id', //注意必须要写:参数名 
    component: () => import('user')
}
// 跳转 home.vue
this.$router.push('user/'+this.id);

// 接收参数 user.vue
created() {
    console.log(this.$route.params.id);
}

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

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

// 路由  router/index.js
{ 
    path: '/user', //注意这里就不需要:id了
    component: () => import('user')
}

// 跳转 home.vue
this.$router.push({
    path: "/user",
    query: { id:this.id } 
});

// 接收参数 user.vue
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); 
}