重定向和别名

简介

在 Vue Router 中，路由重定向是一种将用户从一个 URL 自动导航到另一个 URL 的机制。这通常用于确保用户访问某个 URL 时，会自动跳转到另一个指定的 URL，以提供更好的用户体验或确保页面的正确访问。

重定向

配置重定向时，需要在路由配置对象中使用 redirect 属性。这个属性接收一个对象作为参数，可以使用目标路由的 path 或者 name 属性来确定重定向的目标路由。

代码示例

继续使用上节示例，设置 Ceshiren 页面的路由重定向到 Redirect 页面，代码如下所示：

Redirect.vue

<template>
    <div>
        <h2>重定向路由成功</h2>
    </div>
</template>

index.js

import {createRouter,createWebHashHistory} from 'vue-router'
import Ceshiren from '../components/Ceshiren.vue'
import Redirect from '../components/Redirect.vue'
const routes=[
    {
        path:'/ceshiren',
        component:Ceshiren,
        // 重定向路由，可以使用 name 或者 path 属性
        // redirect:{name: 'redirectname'}
        redirect:{path:'/redirect'}
    },
    {
        path:'/redirect',
        component:Redirect,
        name:'redirectname'
    }
]

访问页面点击 点击进入 Ceshiren 页面 ，进入 Redirect 页面，页面重定向成功，实现效果如下图所示：

别名

Vue 还提供对路由别名的设置，通过属性 alias 可以为路由规则指定一个额外的名字，以便在应用程序中引用该路由。

alias 属性可以接收一个字符串或一个字符串数组，用于指定路由的别名路径，语法如下所示：

{
  path:'/dashboard',
  component:Dashboard,

  // 设置一个别名
  alias:'/admin' 

  // 设置多个别名
  // alias:['/admin','control-penal'] 
}

别名的优点

简化路径：在应用程序中使用别名可以更简洁、易记的路径来访问特定的页面，而无需担心实际的路由路径。
改变路由路径：实际开发会存在不改变实际路由，但改变用户所看到的路径的情况，别名使得这个过程更容易。
提高用户体验：别名可以改善用户在浏览器地址栏中看到的路径，使其更加友好和易于理解。
路由重构：在进行路由重构时，可以保留旧的路由路径作为别名，以确保已有的链接不会失效。

代码示例

下面是使用的一个示例：

index.js

import {createRouter,createWebHashHistory} from 'vue-router'
import Ceshiren from '../components/Ceshiren.vue'
import Hogwarts from '../components/Hogwarts.vue'
import HogChild from '../components/HogChild.vue'
const routes=[
    {
        path:'/ceshiren',
        component:Ceshiren,
        // 设置单个别名
        alias:'/rename_ceshiren'
    },
    {
        path:'/hogwarts',
        component:Hogwarts,
        // 设置多个别名
        alias:['/hog_rename','/rename_hog'],
        children:[
            {
                path: "hogchild",
                component: HogChild,
                name: 'hogchildname',
            }
        ]
    }
]

这时使用别名分别访问以下页面，页面效果如图所示：

http://127.0.0.1:5173/#/hog_rename

http://127.0.0.1:5173/#/rename_hog

访问 http://127.0.0.1:5173/#/rename_ceshiren，页面效果如下图所示：

此外，别名的路径可以是相对路径或绝对路径。

相对路径会被解释为相对于当前路由的路径，而绝对路径会被解释为相对于根路径的路径：

alias: 'admin' 会被解释为相对路径。
alias: '/admin' 会被解释为绝对路径。

总结

本节介绍了路由重定向和别名的设置，掌握本节你将能够灵活地配置路由，从而丰富和优化应用程序的导航体验。