Vue重定向redirect的三种写法总结

const router = createRouter({
  routes: [
    {
      path: '/原路径',  // 用户访问的路径
      redirect: '/目标路径'  // 直接跳转到这个路径
    }
  ]
})

{ path: '/old', redirect: '/new' }  // 访问 /old → 自动跳转到 /new

const router = createRouter({
  routes: [
    {
      path: '/原路径',
      redirect: { name: '目标路由名称' }  // 通过路由的 name 属性跳转
    },
    // 必须先定义目标路由，并设置 name
    {
      path: '/目标路径',
      name: '目标路由名称',  // 给路由起个名字
      component: 目标组件
    }
  ]
})

{ path: '/user', redirect: { name: 'profile' } }  // 访问 /user → 跳转到 name 为 profile 的路由

const router = createRouter({
  routes: [
    {
      path: '/原路径/:参数名',  // 带动态参数的路径
      redirect: to => {
        // to 是当前访问的路由对象
        return {
          path: '/目标路径',
          query: { 参数名: to.params.参数名 }  // 传递参数
        }
      }
    }
  ]
})

{
  path: '/search/:keyword',  // 访问 /search/vue
  redirect: to => {
    return {
      path: '/results',
      query: { q: to.params.keyword }  // 跳转到 /results?q=vue
    }
  }
}

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：直接路径跳转
    { path: '/', redirect: '/home' },
    
    // 写法2：通过路由名称跳转
    { path: '/user', redirect: { name: 'profile' } },
    { path: '/profile', name: 'profile', component: Profile },
    
    // 写法3：动态跳转（带参数）
    { 
      path: '/search/:keyword', 
      redirect: to => ({
        path: '/results',
        query: { q: to.params.keyword }
      }) 
    },
    { path: '/results', component: Results },
    
    // 基础路由
    { path: '/home', component: Home },
  ]
})

export default router