快捷導(dǎo)航

VUE中使用路由router跳轉(zhuǎn)頁面多種方式

更新時間：2025年05月12日 09:59:59 作者：Lentou

對于單頁應(yīng)用,官方提供了vue-router進行路由跳轉(zhuǎn)的處理,這篇文章主要給大家介紹了關(guān)于VUE中使用路由router跳轉(zhuǎn)頁面的多種方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

在 Vue 中，this.$router.push 是用來跳轉(zhuǎn)到另一個路由的方法，它可以傳遞參數(shù)。Vue Router 提供了多種方式來傳遞路由參數(shù)，常見的有查詢參數(shù)（query）和路由參數(shù)（params）。

1. 查詢參數(shù)（Query Parameters）

查詢參數(shù)是 URL 中 ? 后面的部分，格式通常是 key=value。查詢參數(shù)的優(yōu)勢是可以在 URL 中顯示，且不依賴于路由的定義。

路由跳轉(zhuǎn)并傳遞查詢參數(shù)
可以使用 this.$router.push 跳轉(zhuǎn)到一個新的路由，并在 URL 中添加查詢參數(shù)。

// 路由跳轉(zhuǎn)，并傳遞查詢參數(shù)
this.$router.push({ path: '/newPage', query: { id: 123, name: 'Tom' } });

這里，/newPage?id=123&name=Tom 是最終跳轉(zhuǎn)后的 URL?？梢詡鬟f一個對象，指定 path（目標(biāo)路徑）和 query（查詢參數(shù)）。

在目標(biāo)頁面中獲取查詢參數(shù)

在目標(biāo)頁面中，可以通過 this.$route.query 來獲取查詢參數(shù)。

// 獲取查詢參數(shù)
const id = this.$route.query.id;  // 123
const name = this.$route.query.name;  // 'Tom'

2. 路由參數(shù)（Route Params）

路由參數(shù)是 URL 路徑的一部分，通常在路由定義中使用動態(tài)路由（例如：/user/:id）。路由參數(shù)通常是隱藏在 URL 中的。

路由跳轉(zhuǎn)并傳遞路由參數(shù)

可以在 this.$router.push 中通過 params 傳遞路由參數(shù)。

// 路由跳轉(zhuǎn)，并傳遞路由參數(shù)
this.$router.push({ name: 'user', params: {  lsls: 123, namez: 'Tom' } });

這里，/user/123 是跳轉(zhuǎn)后的 URL，id 就是路由參數(shù)。需要確保路由已經(jīng)在路由配置中定義了動態(tài)參數(shù)。

路由配置示例（帶參數(shù)）

const routes = [
  {
    path: '/user/:lsls/:namez',//可定義多個參數(shù)
    name: 'user',
    component: UserPage
  }
];

在目標(biāo)頁面中獲取路由參數(shù)在目標(biāo)頁面中，可以通過 this.$route.params 獲取路由參數(shù)。

// 獲取路由參數(shù)
const id = this.$route.params.lsls;  // 123
const id = this.$route.params.namez;  // Tom

注意事項：

路由參數(shù)（params）只能通過命名路由或動態(tài)路由進行傳遞（/user/:id。如果在使用 query 參數(shù)時，路徑會顯示為?key=value，而 params 會直接出現(xiàn)在路徑中，比如 /user/123。query 和 params 傳遞的參數(shù)方式不同,query 用于查詢字符串，params 用于路徑參數(shù)。在組件的 mounted 或 created 生命周期鉤子中，你可以訪問 this.$route 來獲取當(dāng)前路由的參數(shù)，無論是 query 還是 params。

避免使用 params 和 query 混合使用
在訪問路由參數(shù)時（如 this.r o u t e . p a r a m s 或 t h i s . route.params 或 this.route.params或this.route.query），需要注意你訪問它們的時機。如果在組件加載前（如 created 鉤子）訪問，可能還無法獲取到最新的路由信息。此時，可以通過 beforeRouteEnter 或 beforeRouteUpdate 鉤子來獲取更準(zhǔn)確的信息。

beforeRouteEnter(to, from, next) {
  // 在進入頁面時獲取路由參數(shù)
  console.log(to.params.id);
  next();
}

beforeRouteUpdate(to, from, next) {
  // 在路由變化時獲取更新后的路由參數(shù)
  console.log(to.params.id);
  next();
}

如果路由配置中使用了重定向（redirect），并且重定向的目標(biāo)路徑中包含參數(shù)，確保參數(shù)在重定向過程中正確傳遞。

const routes = [
  { path: '/oldPage', redirect: { name: 'newPage', params: { id: 123 } } },
  { path: '/newPage/:id', name: 'newPage', component: NewPage }
];
// 如果 /oldPage 被訪問，將會重定向到 /newPage/123

如果使用了動態(tài)路由，并且在路由中傳遞了 params，但目標(biāo)組件沒有相關(guān)的邏輯處理該參數(shù)時，可能會遇到問題。建議在組件中使用默認(rèn)值，確保如果某些參數(shù)沒有傳遞時，頁面能夠正常工作。

const id = this.$route.params.id || 'defaultId';

注：

params 用于路徑參數(shù)，適用于動態(tài)路由；query 用于查詢字符串參數(shù)，通常用于 URL 中顯示。
確保路由配置與傳遞的參數(shù)一致，避免混淆 params 和 query。
在訪問路由參數(shù)時，注意訪問時機，推薦使用生命周期鉤子如beforeRouteEnter,beforeRouteUpdate 處理路由變化。
在跳轉(zhuǎn)時，確保不混用兩種參數(shù)，保持清晰的參數(shù)傳遞方式。

完整示例Vue 應(yīng)用，路由配置如下：

import Vue from 'vue';
import Router from 'vue-router';
import UserPage from './components/UserPage';

Vue.use(Router);

const routes = [
  {
    path: '/user/:id/:name?',  // 定義兩個動態(tài)參數(shù) id 和 name 可以使用?標(biāo)識參數(shù)可選傳遞
    name: 'user',
    component: UserPage
  }
];

const router = new Router({
  routes
});

export default router;

在跳轉(zhuǎn)時，可以使用如下代碼：

// 跳轉(zhuǎn)到 /user/123/Tom
this.$router.push({ name: 'user', params: { id: 123, name: 'Tom' } });

然后在 UserPage 組件中，可以獲取到 id 和 name 參數(shù)：

export default {
  created() {
    const id = this.$route.params.id;
    const name = this.$route.params.name;// 如果可選參數(shù)沒傳則是undefind
    console.log(`User ID: ${id}, Name: ${name}`);
  }
};