获取页面跳转携带的参数

在 Vue 3 中，使用 Vue Router 进行页面跳转并携带参数后，在目标页面获取这些参数的方式会因参数类型（路径参数、查询参数）而有所不同，以下为你详细介绍获取参数的方法。

前置准备

确保你已经安装并配置好了 Vue Router，可参考之前的配置步骤。假设路由配置如下：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user/:id',
    name: 'User',
    component: User
  },
  {
    path: '/search',
    name: 'Search',
    component: Search
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

1. 获取路径参数

路径参数是在路由路径中定义的参数，例如 /user/:id 中的 :id 就是一个路径参数。

跳转页面时传递路径参数

使用声明式导航：

<template>
  <div>
    <!-- 携带 id 参数跳转到 User 页面 -->
    <router-link :to="`/user/${userId}`">User</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const userId = ref(1);
</script>

使用编程式导航：

import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
const userId = ref(1);

const goToUser = () => {
  router.push(`/user/${userId.value}`);
};

在目标页面获取路径参数

在目标页面（如 User.vue）中，使用 useRoute 钩子获取当前路由信息，从而获取路径参数。

<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = route.params.id;
</script>

2. 获取查询参数

查询参数是在 URL 的 ? 后面传递的参数，例如 /search?keyword=Vue 3 中的 keyword 就是一个查询参数。

跳转页面时传递查询参数

使用声明式导航：

<template>
  <div>
    <!-- 携带 keyword 参数跳转到 Search 页面 -->
    <router-link :to="{ path:'/search', query: {keyword:'Vue3' } }">Search</router-link>
  </div>
</template>

<script setup>
// 无需额外的脚本代码
</script>

使用编程式导航：

import { useRouter } from 'vue-router';

const router = useRouter();

const goToSearch = () => {
  router.push({
    path: '/search',
    query: {
      keyword: 'Vue3'
    }
  });
};

在目标页面获取查询参数

同样使用 useRoute 钩子在目标页面（如 Search.vue）中获取查询参数。

<template>
  <div>
    <h1>Search Page</h1>
    <p>Search Keyword: {{ keyword }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const keyword = route.query.keyword;
</script>

3. 注意事项

• useRoute 钩子返回的 route 对象是响应式的，当路由发生变化时，参数也会相应更新。
• 路径参数和查询参数可以同时使用，例如 /user/1?name=John，在目标页面可以分别通过 route.params.id 和 route.query.name 获取对应的参数值。

通过以上方法，你可以在 Vue 3 项目中方便地获取跳转页面时携带的参数。

1. 使用路径参数传递多个参数

路径参数适合传递一些必要的、与路由路径紧密相关的参数。

路由配置

在路由配置里定义多个路径参数：

const routes = [
  {
    path: '/detail/:id/:category',
    name: 'Detail',
    component: Detail
  }
];

传递参数

• 声明式导航

<template>
  <div>
    <router-link :to="`/detail/${itemId}/${itemCategory}`">查看详情</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const itemId = ref(1);
const itemCategory = ref('electronics');
</script>

• 编程式导航

<template>
  <div>
    <button @click="goToDetail">查看详情</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
const itemId = ref(1);
const itemCategory = ref('electronics');

const goToDetail = () => {
  router.push(`/detail/${itemId.value}/${itemCategory.value}`);
};
</script>

获取参数

在目标组件（如 Detail.vue）中使用 useRoute 来获取参数：

<template>
  <div>
    <p>ID: {{ id }}</p>
    <p>分类: {{ category }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.params.id;
const category = route.params.category;
</script>

2. 使用查询参数传递多个参数

查询参数适合传递可选的、不影响路由匹配的参数。

传递参数

• 声明式导航

<template>
  <div>
    <router-link :to="{ path: '/detail', query: { id: itemId, category: itemCategory, sort: 'asc' } }">查看详情</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const itemId = ref(1);
const itemCategory = ref('electronics');
</script>

• 编程式导航

<template>
  <div>
    <button @click="goToDetail">查看详情</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
const itemId = ref(1);
const itemCategory = ref('electronics');

const goToDetail = () => {
  router.push({
    path: '/detail',
    query: {
      id: itemId.value,
      category: itemCategory.value,
      sort: 'asc'
    }
  });
};
</script>

获取参数

在目标组件中获取查询参数：

<template>
  <div>
    <p>ID: {{ id }}</p>
    <p>分类: {{ category }}</p>
    <p>排序: {{ sort }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.query.id;
const category = route.query.category;
const sort = route.query.sort;
</script>

3. 使用状态参数传递多个参数

状态参数不会显示在 URL 中，适合传递一些敏感信息或不想暴露在 URL 里的数据。

传递参数

• 编程式导航

<template>
  <div>
    <button @click="goToDetail">查看详情</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';

const router = useRouter();
const itemId = ref(1);
const itemCategory = ref('electronics');
const price = ref(99.99);

const goToDetail = () => {
  router.push({
    name: 'Detail',
    params: { id: itemId.value },
    state: {
      category: itemCategory.value,
      price: price.value
    }
  });
};
</script>

获取参数

在目标组件中获取状态参数：

<template>
  <div>
    <p>ID: {{ id }}</p>
    <p>分类: {{ category }}</p>
    <p>价格: {{ price }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const id = route.params.id;
const category = route.state?.category;
const price = route.state?.price;
</script>

总结

• 路径参数：适合传递必要的、与路由路径紧密相关的参数，会显示在 URL 中。
• 查询参数：适合传递可选的、不影响路由匹配的参数，会显示在 URL 中。
• 状态参数：适合传递敏感信息或不想暴露在 URL 里的数据，不会显示在 URL 中。