vue3获取页面跳转携带的参数

获取页面跳转携带的参数

在 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>