快捷導(dǎo)航

Vue重定向redirect的三種寫法總結(jié)

更新時(shí)間：2025年06月17日 10:45:58 作者：WZMeiei

這篇文章主要介紹了Vue重定向redirect的三種寫法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、寫法 1：直接路徑跳轉(zhuǎn)（最簡(jiǎn)單）
二、寫法 2：通過(guò)路由名稱跳轉(zhuǎn)（更靈活）
三、寫法 3：動(dòng)態(tài)跳轉(zhuǎn)（帶參數(shù)，最靈活）
四、核心規(guī)則速查表（必須記?。。?/a>
五、完整示例（三種寫法對(duì)比）
六、一句話總結(jié)

一、寫法 1：直接路徑跳轉(zhuǎn)（最簡(jiǎn)單）

const router = createRouter({
  routes: [
    {
      path: '/原路徑',  // 用戶訪問(wèn)的路徑
      redirect: '/目標(biāo)路徑'  // 直接跳轉(zhuǎn)到這個(gè)路徑
    }
  ]
})

必記規(guī)則：

redirect 后直接跟字符串路徑（必須以 / 開(kāi)頭）。
路徑必須存在：確保 /目標(biāo)路徑 在路由配置里有對(duì)應(yīng)的組件。

示例：

{ path: '/old', redirect: '/new' }  // 訪問(wèn) /old → 自動(dòng)跳轉(zhuǎn)到 /new

二、寫法 2：通過(guò)路由名稱跳轉(zhuǎn)（更靈活）

const router = createRouter({
  routes: [
    {
      path: '/原路徑',
      redirect: { name: '目標(biāo)路由名稱' }  // 通過(guò)路由的 name 屬性跳轉(zhuǎn)
    },
    // 必須先定義目標(biāo)路由，并設(shè)置 name
    {
      path: '/目標(biāo)路徑',
      name: '目標(biāo)路由名稱',  // 給路由起個(gè)名字
      component: 目標(biāo)組件
    }
  ]
})

必記規(guī)則：

redirect 后是對(duì)象，必須包含 name 屬性。
路由名稱必須先定義：確保 name: '目標(biāo)路由名稱' 在路由配置里存在。

示例：

{ path: '/user', redirect: { name: 'profile' } }  // 訪問(wèn) /user → 跳轉(zhuǎn)到 name 為 profile 的路由

三、寫法 3：動(dòng)態(tài)跳轉(zhuǎn)（帶參數(shù)，最靈活）

const router = createRouter({
  routes: [
    {
      path: '/原路徑/:參數(shù)名',  // 帶動(dòng)態(tài)參數(shù)的路徑
      redirect: to => {
        // to 是當(dāng)前訪問(wèn)的路由對(duì)象
        return {
          path: '/目標(biāo)路徑',
          query: { 參數(shù)名: to.params.參數(shù)名 }  // 傳遞參數(shù)
        }
      }
    }
  ]
})

必記規(guī)則：

redirect 后是箭頭函數(shù)，函數(shù)返回一個(gè)對(duì)象。

參數(shù)傳遞：

to.params.參數(shù)名 → 獲取當(dāng)前路由的動(dòng)態(tài)參數(shù)（如 /user/123 中的 123）。
query: { 參數(shù)名: 值 } → 把參數(shù)轉(zhuǎn)為查詢參數(shù)（如 ?id=123）。

示例：

{
  path: '/search/:keyword',  // 訪問(wèn) /search/vue
  redirect: to => {
    return {
      path: '/results',
      query: { q: to.params.keyword }  // 跳轉(zhuǎn)到 /results?q=vue
    }
  }
}

四、核心規(guī)則速查表（必須記?。。?/h2>
寫法固定格式關(guān)鍵注意點(diǎn)
直接路徑 redirect: '/目標(biāo)路徑' 路徑必須以 / 開(kāi)頭，且已配置路由
路由名稱 redirect: { name: '目標(biāo)名稱' } 必須先定義帶 name 的路由
動(dòng)態(tài)跳轉(zhuǎn) redirect: to => ({ ... }) 用 to.params 獲取當(dāng)前路由參數(shù)

寫法	固定格式	關(guān)鍵注意點(diǎn)
直接路徑	redirect: '/目標(biāo)路徑'	路徑必須以 / 開(kāi)頭，且已配置路由
路由名稱	redirect: { name: '目標(biāo)名稱' }	必須先定義帶 name 的路由
動(dòng)態(tài)跳轉(zhuǎn)	redirect: to => ({ ... })	用 to.params 獲取當(dāng)前路由參數(shù)

五、完整示例（三種寫法對(duì)比）

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import Profile from './views/Profile.vue'
import Search from './views/Search.vue'
import Results from './views/Results.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 寫法1：直接路徑跳轉(zhuǎn)
    { path: '/', redirect: '/home' },
    
    // 寫法2：通過(guò)路由名稱跳轉(zhuǎn)
    { path: '/user', redirect: { name: 'profile' } },
    { path: '/profile', name: 'profile', component: Profile },
    
    // 寫法3：動(dòng)態(tài)跳轉(zhuǎn)（帶參數(shù)）
    { 
      path: '/search/:keyword', 
      redirect: to => ({
        path: '/results',
        query: { q: to.params.keyword }
      }) 
    },
    { path: '/results', component: Results },
    
    // 基礎(chǔ)路由
    { path: '/home', component: Home },
  ]
})

export default router