快捷導(dǎo)航

vue3?vue-router傳遞路由參數(shù)實(shí)戰(zhàn)案例

更新時(shí)間：2025年06月04日 10:13:17 作者：米粒寶的爸爸

在Vue3中vue-router是Vue.js官方的路由管理器,用于構(gòu)建單頁(yè)面應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3?vue-router傳遞路由參數(shù)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

在 Vue 3 中，使用 vue-router 傳遞路由參數(shù)是非常常見(jiàn)的需求。

1. 使用動(dòng)態(tài)路由參數(shù)（params）

動(dòng)態(tài)路由參數(shù)是定義在路由規(guī)則中的占位符部分，例如 /user/:id。你可以通過(guò) router.push 或 <router-link> 傳遞這些參數(shù)。

(1) 配置動(dòng)態(tài)路由

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/user/:id', // 動(dòng)態(tài)參數(shù) :id
    component: () => import('@/views/UserDetail.vue')
  }
];

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

export default router;

(2) 通過(guò) router.push 傳遞參數(shù)

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToUser = (userId) => {
      router.push({ name: 'user', params: { id: userId } }); // 傳遞參數(shù)
    };

    return { navigateToUser };
  }
};

(3) 在目標(biāo)組件中獲取參數(shù)

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id; // 獲取動(dòng)態(tài)參數(shù)

    return { userId };
  }
};

2. 使用查詢參數(shù)（query）

查詢參數(shù)是 URL 中 ? 后面的部分，例如 /search?name=Vue&id=123。你可以通過(guò) router.push 或 <router-link> 傳遞查詢參數(shù)。

(1) 通過(guò) router.push 傳遞查詢參數(shù)

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToSearch = () => {
      router.push({
        path: '/search',
        query: { name: 'Vue', id: 123 } // 傳遞查詢參數(shù)
      });
    };

    return { navigateToSearch };
  }
};

(2) 在目標(biāo)組件中獲取查詢參數(shù)

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const name = route.query.name; // 獲取查詢參數(shù)
    const id = route.query.id;

    return { name, id };
  }
};

3. 使用命名路由（推薦）

如果你的路由配置中定義了 name 屬性，可以通過(guò)命名路由傳遞參數(shù)，這樣可以避免硬編碼路徑。

(1) 定義命名路由

const routes = [
  {
    path: '/user/:id',
    name: 'user', // 定義路由名稱
    component: () => import('@/views/UserDetail.vue')
  }
];

(2) 通過(guò) router.push 使用命名路由傳遞參數(shù)

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToUser = (userId) => {
      router.push({
        name: 'user', // 使用路由名稱
        params: { id: userId } // 傳遞動(dòng)態(tài)參數(shù)
      });
    };

    return { navigateToUser };
  }
};

4. 使用 <router-link> 傳遞參數(shù)

除了編程式導(dǎo)航（router.push），你還可以通過(guò) <router-link> 傳遞參數(shù)。

(1) 傳遞動(dòng)態(tài)參數(shù)

<template>
  <router-link :to="{ name: 'user', params: { id: 123 } }">
    跳轉(zhuǎn)到用戶詳情頁(yè)
  </router-link>
</template>

(2) 傳遞查詢參數(shù)

<template>
  <router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">
    跳轉(zhuǎn)到搜索頁(yè)
  </router-link>
</template>

5. 區(qū)分動(dòng)態(tài)參數(shù)和查詢參數(shù)

類型	位置	示例 URL	獲取方式
動(dòng)態(tài)參數(shù) (`params`)	路徑中	`/user/123`	`route.params.id`
查詢參數(shù) (`query`)	URL 的 `?` 后	`/search?name=Vue&id=123`	`route.query.name`

6. 注意事項(xiàng)

動(dòng)態(tài)參數(shù)會(huì)被移除
- 如果你在導(dǎo)航時(shí)切換了路由，但沒(méi)有重新設(shè)置動(dòng)態(tài)參數(shù)，那么參數(shù)會(huì)被清除。
- 解決方法：確保在導(dǎo)航時(shí)重新傳遞參數(shù)，或者使用 watch 監(jiān)聽(tīng) route.params 的變化。
查詢參數(shù)不會(huì)被移除
- 查詢參數(shù)會(huì)保留在 URL 中，直到你手動(dòng)清除或覆蓋它們。
強(qiáng)制刷新頁(yè)面時(shí)丟失參數(shù)
- 如果用戶刷新頁(yè)面，動(dòng)態(tài)參數(shù)和查詢參數(shù)仍然可以從 route.params 和 route.query 中獲取。

7. 完整示例

路由配置

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: () => import('@/views/UserDetail.vue')
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('@/views/SearchPage.vue')
  }
];

導(dǎo)航組件

<template>
  <div>
    <!-- 傳遞動(dòng)態(tài)參數(shù) -->
    <router-link :to="{ name: 'user', params: { id: 123 } }">
      查看用戶詳情
    </router-link>

    <!-- 傳遞查詢參數(shù) -->
    <router-link :to="{ path: '/search', query: { name: 'Vue', id: 123 } }">
      搜索內(nèi)容
    </router-link>
  </div>
</template>

接收參數(shù)的目標(biāo)組件

<template>
  <div>
    <p>用戶 ID: {{ userId }}</p>
    <p>查詢參數(shù) Name: {{ name }}</p>
    <p>查詢參數(shù) ID: {{ id }}</p>
  </div>
</template>

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

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id; // 獲取動(dòng)態(tài)參數(shù)
    const name = route.query.name; // 獲取查詢參數(shù)
    const id = route.query.id;

    return { userId, name, id };
  }
};
</script>