vue3中路由传参query、params及动态路由传参详解

针对vue3中的路由传参query、params及动态路由传参，我来为大家做一份详细的攻略。

一、前置知识

Vue-router

Vue提供了一款官方的路由插件Vue-router，可以方便的实现SPA应用的路由管理。若未安装Vue-router，可以通过以下命令进行安装：

npm install vue-router

动态路由

动态路由是 vue-router 的高级技术。它允许在路由路径中使用“参数”，并且没有严格的路由匹配规则。它允许您捕获所有匹配特定模式的路径，并将其作为动态部分传递给组件。

路由传参

路由传参是指将数据传递至路由中，以供路由在跳转时使用。vue-router中的路由传参分为两种：

1. 通过query方式传递参数

使用query方式，所有参数都会被添加到URL的query参数中。参数可以通过$route.query属性访问。

1. 通过params方式传递参数

使用params方式时，参数会被动态地插入到URL的路由中。通过$route.params属性即可访问。

二、路由传参示例解析

假设我们现在需要跳转到一个详情页面，并将一些信息传递到该页面中。为了方便展示，我们这里使用vue-router提供的官方示例（https://github.com/vuejs/vue-router/tree/dev/examples）。

示例一：query方式传递参数

该示例中的代码结构如下：

|--src
   |--views
       |--Home.vue
       |--About.vue
       |--User.vue
       |--UserHome.vue
   |--router
       |--index.js

Home.vue页面中有一个“to user”按钮，点击后可以跳转到User.vue页面。我们希望在页面间传递user参数（如用户ID）。

1.定义路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user',
    name: 'User',
    component: User
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2.在页面间传递参数

<!-- Home.vue -->
<template>
  <div class="home">
    <h1>Home</h1>
    <button @click="toUser">to user</button>
  </div>
</template>

<script>
export default {
  methods: {
    toUser() {
      // 通过query方式传递参数（即?后面的参数）
      this.$router.push({ path: '/user', query: { user: '123' }})
    }
  }
}
</script>

<!-- User.vue -->
<template>
  <div class="user">
    <h1>User</h1>
    <p>User ID: {{ $route.query.user }}</p>
  </div>
</template>

<script>
export default {
}
</script>

在Home.vue页面中，点击“to user”按钮时，将通过this.$router.push方法跳转至User.vue页面，并传递一个名为user的参数，参数值为'123'。在User.vue页面中，使用$route.query即可获取该参数的值。

示例二：params方式传递参数

该示例中的代码结构如下：

|--src
   |--views
       |--Home.vue
       |--About.vue
       |--User.vue
       |--UserHome.vue
   |--router
       |--index.js

Home.vue页面中有一个“to user home”按钮，点击后可以跳转到UserHome.vue页面。我们希望在页面间传递user参数（如用户ID）。

1.定义路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
import UserHome from '../views/UserHome.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/user/:user',
    name: 'User',
    component: User,
    children: [
      {
        path: '',
        component: UserHome
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2.在页面间传递参数

<!-- Home.vue -->
<template>
  <div class="home">
    <h1>Home</h1>
    <button @click="toUserHome">to user home</button>
  </div>
</template>

<script>
export default {
  methods: {
    toUserHome() {
      // 通过params方式传递参数（即在path中定义参数）
      this.$router.push({ name: 'User', params: { user: '123' }})
    }
  }
}
</script>

<!-- UserHome.vue -->
<template>
  <div class="user-home">
    <h2>UserHome</h2>
    <p>{{ $route.params.user }}'s home</p>
  </div>
</template>

<script>
export default {
}
</script>

在Home.vue页面中，点击“to user home”按钮时，将通过this.$router.push方法跳转至User.vue页面，并传递一个名为user的参数，参数值为'123'。在User.vue页面中，使用$route.params即可获取该参数的值。同时，我们还可以在User.vue页面中定义子路由，以UserHome.vue为例，可以实现更加复杂的页面结构。注意，用户ID这种唯一标识符通常用params方式传递更加符合使用规范。

希望以上示例能够帮助大家更好地掌握vue3中路由传参query、params及动态路由传参的使用。