vue的路由跳转及传参亲测好用

vue的路由跳转及传参亲测好用

当前页面

//都需要写一个方法来调用他
this.$router.push({
        name: "jobDetails",
        params: {
          id: this.id
       }
});

///////////////////////////////////////////////////
this.$router.push({
        path: "/jobDetails",
        query: {
          id: this.id
       }
});

//////////////////////////////////////////////////////
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

接收页面

data() {
    return {
      id: ""
    };
},
////////////////////////////////////////////////////////
created() {
      this.id=this.$route.params.id;
    //this.id=this.$route.query.id;
    // console.log(this.id);
},

需要注意的是接收的时候是$route没有加 “r”
还有就是name和params搭配，path和query搭配不然会获取不到参数