场景

点击当前页的某个按钮跳转到另一个页面去，并将某个值带过去

第一种方法

页面刷新数据不会丢失

  1. methods:{
  2.     insurance(id){
  3.       直接调用$router.push实现携带参数的跳转
  4.     this.$router.push({
  5.         path:`/particular/${id}`
  6.     })
  7.   }
  8. }

需要对应路由的配置如下

  1. {
  2.     path:'/particular/:id'
  3.   name:'particulars'
  4.   component:particulars
  5. }

可以看出需要在path中添加/:id来对应$router.push中path携带的参数。在子组件中可以使用获取传递参数值

页面获取参数的方法如下

  1. this.$route.params.id

第二种方法

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

  1. methods:{
  2.     insurance(id){
  3.       this.$router.push({
  4.         name:'particulars',
  5.       params:{
  6.           id:id
  7.       }
  8.     })
  9.   }
  10. }

对应路由配置：注意这里不能使用：/:id来传递参数了，组件中，已经使用params来携带参数

  1. {
  2.     path:'/particulars',
  3.   name:'particulars',
  4.    component:particulars
  5. }

子组件获取参数的方法

this.$route.params.id

第三种方法

使用path来匹配路由，通过query来传递参数
这种情况下query传递的参数会显示在url 后面？id=?

  1. methods:{
  2.     insurance(id){
  3.       this.$router.push({
  4.         path:'/particulars',
  5.       query:{
  6.       id:id
  7.       }
  8.     })
  9.   }
  10. }

对应路由设置：

  1. {
  2. path: '/particulars',
  3.      name: 'particulars',
  4.      component: particulars
  5. }

子组件获取参数的方式

this.$route.query.id