vue 跳转页面并传递参数

方式一：
在router文件里面配置路径的时候，将id放在路径后面

  {
    path: '/test/detail/:id',
    name: 'test-detail',
    component: () => import('./views/test/detail.vue'),
    meta: {
      title: '测试'
    }
  }

跳转页面使用下面这种方式
 

let id = 1
this.$router.push('/test/detail/' + id)

方式二：

通过params传递参数

注意！！！一定要用name

// 注意这个name
this.$router.push({
  path: '/test/detail',
  name: 'my-detail',
  params: {
    key: 'test',
    id: 1
  }
})

接收参数，这种方式参数不会在路径中显示

if (this.$route.params) {
      let id = this.$route.params.id
      let key = this.$route.params.key
}

方式三：

通过query传递参数

this.$router.push({
  path: '/test/detail',
  name: 'my-detail',
  query: {
    key: 'test',
    id: 1
  }
})

或者

this.$router.push('/test/detail?id=1&key=test')

接收参数，这种方式，参数会显示在路径里面

if (this.$route.query) {
      let id = this.$route.query.id
      let key = this.$route.query.key
}