vue路由传参的三种基本方式，router对象和route对象

问题引入：现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。 父组件中：

在此之前，我们得先搞清楚两个东西，$router和$route 可以自行打印出来看看里面都有啥

• $route是路由信息对象

1. 里面包含了路由的一些信息，如name，path，query对象，params对象，fullPath，hash，meta等等
2. 只读，不可以修改。一般是获取路由信息用

• $router是路由操作对象

1. $router对象是全局路由的实例，是router构造方法的实例
2. 包含了常用的push()、replace()、go()等方法
3. 操作路由用

  <li
      v-for="item in list"
      @click="getDescribe(article.id)"
  >

方案一：

1. 传递参数

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

2. 需要配置对应路由，如下：

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

3. 获取参数：

this.$route.params.id

方案二：(np组合：name和params)

np组合，不会显示在地址栏中 1. 传递参数

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})

2. 需要配置路由名称，name：

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

3. 获取参数：

this.$route.params.id

方案三：(pq组合：path和query)

会出现在地址栏中 1. 传递参数

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

this.$router.push({
  path: '/describe',
  query: {
    id: id
  }
})

3. 获取参数：

对应子组件: 这样来获取参数

this.$route.query.id

参考：segmentfault.com/a/119000001…