Vue路由传参props解耦的三种方式小结

题目涉及到Vue路由传参props解耦的三种方式，以下是本文的攻略和示例：

攻略

1. 在路由定义时使用props

在定义路由时，通过将props设置为true，可以将路由参数作为组件属性传递。

// 路由定义
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

在上述路由定义中，我们定义了一个/user/:id的路由，当匹配该路由时，Vue会自动将该路由的参数作为组件的props传递。

在组件中，我们只需要定义props接收路由参数，并直接使用即可。

// 组件定义
export default {
  props: ['id'],
  // ...
}

2. 在路由定义时使用函数

除了直接将props设置为true，还可以使用函数来进行更加灵活的传递。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: (route) => ({ id: route.params.id, name: route.query.name })
    }
  ]
})

在上述路由定义中，我们使用了一个匿名函数来返回props。该函数接收一个route参数，我们可以根据该参数获取路由参数并返回带有用户信息的props对象。

// 组件定义
export default {
  props: ['id', 'name'],
  // ...
}

3. 在组件中使用$route对象

当需要在组件内部直接使用$route对象时，需要使用 $route.params 或 $route.query 来获取路由参数。

// 组件定义
export default {
  data() {
    return {
      id: this.$route.params.id,
      name: this.$route.query.name
    }
  },
  // ...
}

在上述组件定义中，我们使用了组件的data函数来初始化组件数据。我们通过访问$route.params.id 和 $route.query.name获取路由参数，并将其保存在组件的data属性中。

示例

在上述攻略中，我们通过三种方式演示了如何进行Vue路由传参props解耦。接下来，我们通过两个示例来进一步说明这三种方式的用法。

示例一：用户详情页

假设我们需要展示一个用户的详细信息，在用户列表页中点击某个用户，即可跳转到用户详情页，并且在用户详情页中可以展示改用户的完整信息。

路由定义

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserDetail,
      props: true
    }
  ]
})

组件定义

<template>
  <div>
    <p>用户名: {{ username }}</p>
    <p>年龄: {{ age }}</p>
    <p>性别: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'],
  data() {
    return {
      username: '',
      age: 0,
      gender: ''
    }
  },
  mounted() {
    // TODO: 根据用户id获取详细信息，填充data中的数据
  }
}
</script>

在上述示例中，我们定义了一个/user/:id的路由，同时将props设置为true。在组件中，我们定义了一个props接收路由参数，并且使用mounted函数来获取用户详细信息，将其填充到组件的data属性中，实现了用户详情页的展示。

示例二：搜索结果展示页

假设我们需要实现一个搜索结果展示页，可以通过关键字搜索相关的文章，并且点击某篇文章可以跳转到该文章详情页。

路由定义

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchResult,
      props: (route) => ({ keyword: route.query.keyword })
    },
    {
      path: '/article/:id',
      component: ArticleDetail,
      props: true
    }
  ]
})

在上述示例中，我们定义了一个/search的路由用于搜索结果展示页，同时使用了一个函数来返回props，props中包含了搜索关键字。

我们还定义了一个 /article/:id的路由用于文章详情页，同样地，我们将props设置为true。

组件定义

<template>
  <div>
    <h2>{{ keyword }}的搜索结果</h2>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="{ path: '/article/' + article.id }">
          {{ article.title }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['keyword'],
  data() {
    return {
      articles: []
    }
  },
  mounted() {
    // TODO: 根据关键字搜索相关文章
    // 将搜索结果存储在this.articles中
  }
}
</script>

在上述示例中，我们定义了一个搜索结果展示页组件，在组件中定义了props接收路由参数keyword，并且使用mounted函数来进行搜索操作。

在展示搜索结果时，我们使用v-for遍历this.articles数组，并通过router-link来实现点击文章标题到文章详情页的跳转。