VUE路由传参的三种基本方式

VUE路由传参的三种基本方式

使用场景：点击页面某个按钮通过路由跳转到其他页面，并携带参数过去。

方式一

页面刷新数据不会丢失

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

需要对应路由配置如下：

{
	path: '/particulars/:id',
	name: 'particulars',
	component: particulars
}

页面获取参数方式如下：

this.$route.params.id

方式二

页面刷新数据会丢失
通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }
}

对应路由配置

 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
  }

页面获取参数方式如下：

this.$route.params.id

方式三

使用path来匹配路由，然后通过query来传递参数，但query传递的参数会显示在url后面

methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }
}