Vue-Router 第八节：重定向和别名

一、路由重定向

路由重定向就是将 此路由（'/user'） 配置到想要进入的路由（'user/userOne'） 使用：redirect

分为三种写法：字符串形式、对象形式、函数形式。

1、字符串形式：

// router/index.ts
import About from '@/views/about/index.vue'
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [   
// router/index.ts  
    {
        path: '/',
               component: () => import("@/views/home/index.vue"),
    },
    {
        path: '/userOne',
        component: import("@/views/user/userOne.vue")
    },
    {
        path: '/user',
        redirect: '/userOne'   // 路由/user重定向到 /userOne   
        // 可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。
    },
 
    ]
const router = createRouter({
    // 路由的模式：  vue2:
    // vue2 mode  history | vue3  createWebHistory
    // vue2 mode  hash    | vue3  createWebHashHistory
    // vue2 mode  abstact | vue3  createMemoryHistory   
    history: createWebHistory(),
    routes
})
​
// 导出
export default router

注：此处是省略了component，但在嵌套路由里，如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

  // App.vue
<template>
  <div>
    <router-view />
     <button @click="Topages">重定向</button>
  </div>
</template>
​
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const Topages = () => {
  router.push({ path: '/user' })
}
</script>
​
<style scoped></style>

2、对象形式：

  // router/index.ts
  {
        path: '/user',
        redirect: { path: '/userOne' } // 路径对象
       //  redirect: { name: 'userOne' }  命名对象
        
    },
    {
        path: '/userOne',
        name:'userOne',
        component: import("@/views/user/userOne.vue")
    },

3、函数形式：

  // router/index.ts
  {
        path: '/userOne',
        name:'userOne',
        component: import("@/views/user/userOne.vue")
    },
​
​
    {
        path: '/user/:id',
        redirect: (to) => {             // 重定向
            return {
                path: '/userOne',
                query: {q:to.params.id}  // 传参
            }
        }
    }
​

  // App.vue
<template>
  <div>
    <router-view />
     <button @click="Topages">重定向</button>
  </div>
</template>
​
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const Topages = () => {
  router.push({ path: '/user/123' })
}
</script>
​
<style scoped></style>

// userOne 页面
<template>
    <div style="background-color: yellow;">
        <H1>
            欢迎进入技术部userOne专属页面！{{ $route.query.q }}
        </H1>
    </div>
</template>
​
<script setup lang="ts">
</script>
​
<style></style>

二、路由别名

路由别名就是 为URL为 '/' 的路由起别名为 '/home' ，虽然我访问的URL是 '/home' ,但是它真正访问的还是 '/' 匹配的组件。

他与路由重定向的区别在于： 路由重定向就会访问重定向后匹配的路由，而别名还是会访问原本匹配的路由。

我们使用：alias来进行路由别名的配置。

  // router/index.ts
      {
        path: '/user',
        component: import("@/views/user/index.vue"),
        alias:["/user1","/userIndex"]  // 定义/user 别名为 ： /user1,/userIndex
    }

  // App.vue
<template>
  <div>
    <router-view />
    <button @click="Topages('')">别名/user1</button>
    <br>
    <button @click="Topages('userIndex')">别名/userIndex</button>
  </div>
</template>
​
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter()
const Topages = (item:string) => {
  if(item){
    router.push({ path: '/userIndex' })
  }else{
    router.push({ path: '/user1' })
  }
​
}
</script>
​
<style scoped></style>

// user/index.vue
<template>
    <div style="background-color: pink;">
        <H1>
            欢迎进入技术部专属页面！
        </H1>
        <router-view></router-view>
    </div>
</template>
​
<script setup lang="ts">
</script>
​
<style></style>