路由传参的方式主要有两种:query传参和params传参。
1. Query 传参
首先,在路由配置文件中(通常是 router/index.ts
),定义你的路由:
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Search from '../views/Search.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/search',
name: 'Search',
component: Search
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
然后,在组件中导航到带查询参数的路由:
<template>
<button @click="goToSearch">Go to Search</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter();
const goToSearch = () => {
router.push({ name: 'Search', query: { keyword: 'vue3' } });
};
return { goToSearch };
},
});
</script>
在目标组件 Search.vue
中接收查询参数:
<template>
<div>
<p>Search for: {{ searchKeyword }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
setup() {
const route = useRoute();
const searchKeyword = computed(() => route.query.keyword);
return { searchKeyword };
},
});
</script>
2. Params 传参
在路由配置中,你需要为 params
预留位置:
const routes = [
// ...其他路由
{
path: '/user/:id',
name: 'User',
component: User
}
];
导航到带参数的路由:
<template>
<button @click="goToUser">Go to User</button>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
setup() {
const router = useRouter();
const goToUser = () => {
router.push({ name: 'User', params: { id: 123 } });
};
return { goToUser };
},
});
</script>
在目标组件 User.vue
中接收参数:
<template>
<div>
<p>User ID: {{ userId }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
setup() {
const route = useRoute();
const userId = computed(() => route.params.id);
return { userId };
},
});
</script>
注意: 使用 params 传参时,路径中的参数部分是必须的,并且刷新页面后参数不会丢失,因为它们被包含在了 URL 路径中。而 query 传参的参数在 URL 的查询字符串中,可以自由选择是否包含,但刷新页面后参数依然会保留,除非用户手动更改或清除 URL。