【vue3|第28期】 Vue3 + Vue Router：探索路由重定向的使用与作用

news2024/9/20 21:46:49

日期：2024年9月8日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉在这里插入代码片得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

文章目录

一、前言
二、什么是路由重定向？
三、路由重定向的常见场景
四、如何在Vue Router中实现路由重定向？
- 1、静态的重定向方式
- 2、动态的重定向方式
五、注意事项
六、结语

在这里插入图片描述

一、前言

在 Web 应用开发中，Vue.js 无疑是一个强大的框架，尤其是结合 Vue Router 使用时，能够轻松管理单页面应用（SPA）的路由。今天，我们将深入探讨 Vue3 和 Vue Router 中的一个关键功能——路由重定向。

二、什么是路由重定向？

路由重定向，简单来说，就是当用户访问一个特定的路由时，应用自动将其导航到另一个指定的路由。这个过程对于用户是无感的，但背后却隐藏着许多重要的应用逻辑。

三、路由重定向的常见场景

默认页面跳转：例如，当用户访问应用的根路径时，自动跳转到首页。
旧链接迁移：在应用更新后，有些旧的 URL 可能已经不再使用，通过使用路由重定向，可以将这些旧 URL 映射到新的有效 URL 上，从而避免用户遇到404错误。
权限控制：根据用户的权限或登录状态，自动跳转到相应的页面。
网站维护：当你的网站正在进行维护或升级时，可以使用路由重定向将所有用户请求暂时引导到一个维护页面，以提供必要的通知和信息。
简化用户访问流程：可以把复杂难记的路径通过重定向简化为更简洁、更容易被记住的路径。这样用户在访问页面时更加方便快捷，减少了输入错误的可能性。

四、如何在Vue Router中实现路由重定向？

接下来，让我们看看在 Vue Router 中设置路由重定向两种方式：

1、静态的重定向方式

使用路由重定向：{ path: '/', redirect: '/home' }。
使用命名路由重定向：{ path: '/', redirect: { name: 'home' } }。

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const router = createRouter({
    history: createWebHistory(),
    routes: [
        // NO1:使用路由重定向
        { path: '/', redirect: '/home' },
		// NO2:使用命名路由重定向
        // { path: '/', redirect: { name: 'home' } }, 
        { path: '/home', component: Home },
        { path: '/about', component: About }
    ]
});

export default router;

在上述代码示例中，当用户访问根路径 / 时，就会自动重定向到 /home 路径。

2、动态的重定向方式

除了上面所讲静态的重定向方式，还可以进行动态重定向。例如根据某些条件来决定重定向的目标路径：

{
    path: '/old-page',
    redirect: to => {
        // 根据条件判断重定向路径
        if (isAdmin) {
            return '/new-page-admin';
        } else {
            return '/new-page-user';
        }
    }
}