redirect

2023年05月19日

柏拉文

越努力，越幸运

一、 认识

---

**重定向** 是指当用户访问/home 时，URL会被/替换，然后匹配成/`

二、语法

---

2.1 基础重定向

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: "/about",
    name: "about",
    component: ()=> import('../views/AboutView.vue')
  },
  {
    path: '/other',
    redirect: "/"
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

2.2 命名重定向

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: "/about",
    name: "about",
    component: ()=> import('../views/AboutView.vue')
  },
   {
    path: '/other',
    redirect: {
      name: "home",
    }
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

2.3 路径重定向

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: "/about",
    name: "about",
    component: ()=> import('../views/AboutView.vue')
  },
  {
    path: '/other',
    redirect: {
      path: "/",
    }
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

2.4 动态重定向 - 返回基础

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: "/about",
    name: "about",
    component: ()=> import('../views/AboutView.vue')
  },
  {
    path: '/other',
    redirect: (to: any)=>{
      console.log(to)
      return '/'
    }
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

to 是一个 route 对象，属性如下:

type to = {
  fullPath: string;
  hash: string;
  href: string;
  matched: object;
  meta: {},
  name: string;
  params: {};
  path: string;
  query: {}
}

2.5 动态重定向 - 返回命名

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: "/about",
    name: "about",
    component: ()=> import('../views/AboutView.vue')
  },
  {
    path: '/other',
    redirect: (to: any)=>{
      console.log(to)
      return { name: 'home' , params: {username: "zwq"}}
    }
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL),
})

export default router

to 是一个 route 对象，属性如下:

type to = {
  fullPath: string;
  hash: string;
  href: string;
  matched: object;
  meta: {},
  name: string;
  params: {};
  path: string;
  query: {}
}

2.6 动态重定向 - 返回路径

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/other',
    redirect: (to: any) => {
      console.log(to)
      return { path: '/', query: { username: 'zwq' } }
    }
  }
]

const router = createRouter({
  routes,
  history: createWebHistory(import.meta.env.BASE_URL)
})

export default router

to 是一个 route 对象，属性如下:

type to = {
  fullPath: string;
  hash: string;
  href: string;
  matched: object;
  meta: {},
  name: string;
  params: {};
  path: string;
  query: {}
}