3种vue路由传参的基本模式

当我们使用 Vue.js 构建单页应用（SPA）时，Vue Router 是一项必不可少的插件，它提供了路由切换、嵌套路由、路由参数、路由导航钩子等功能。除此之外，Vue Router 还支持路由传参，使我们可以很方便地将数据传递给组件，并根据传递的参数动态渲染界面。下面，我们将介绍常用的 3 种 Vue 路由传参的基本模式。

1. 动态路由

动态路由是 Vue Router 中最基本的路由传参方式，它通过动态定义路由匹配规则，实现了将数据传递给组件的目的。动态路由传参的特点是URL中体现参数，适用于传递简单的参数。

首先，我们定义一个动态路由：

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

其中，:id 表示一个动态参数，User 是一个组件。

然后，我们在组件中通过 this.$route.params.id 获取动态参数 id 的值：

<template>
  <div>
    <h2>用户详情</h2>
    <p>ID：{{ $route.params.id }}</p>
  </div>
</template>

现在，我们访问 /user/1，就可以看到页面显示出 ID：1。这样，我们就成功地将动态参数传递给了组件。

2. 命名路由

命名路由是 Vue Router 中另一种传递参数的方式，它相比动态路由具有更好的可读性和可维护性。

定义一个命名路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'user',
      component: User
    }
  ]
})

其中，name 是路由的名称。然后，我们可以用 router-link 标签来实现页面跳转，并传递参数：

<router-link :to="{ name: 'user', params: { id: 1 }}">用户详情</router-link>

这里的 to 参数中，name 表示路由名称，params 中传递了参数 id。

接着，在组件中可以通过 this.$route.params.id 获取传递的参数。

3. 查询字符串

还有一种简单的路由传参方式是：查询字符串。查询字符串通常用于传递一些较长的参数或者需要加密的参数，它通过在 URL 的末尾添加 ? 后跟参数名和参数值的方式实现。

定义一个带查询参数的路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

通过 router-link 标签传递参数：

<router-link :to="{ path: '/user', query: { id: 1 }}">用户详情</router-link>

这里的 query 中传递了参数 id。在组件中可以通过 this.$route.query.id 获取传递的参数。

这三种路由传参方式中，动态路由适用于传递简单的参数，命名路由适用于可读性强的参数，而查询字符串适用于较长或需要加密的参数。我们可以根据需要选择不同的传参方式。