vue3路由重定向

// vue3路由重定向示例代码

import { createRouter, createWebHistory } from 'vue-router';

// 定义路由组件
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };
const RedirectedPage = { template: '<div>Redirected Page</div>' };

// 创建路由实例
const routes = [
  {
    path: '/',
    redirect: '/home' // 访问根路径时重定向到/home
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/redirect',
    redirect: to => {
      // 动态重定向，根据条件选择重定向目标
      if (to.query.redirect) {
        return `/redirected-page?from=${to.query.from}`;
      }
      return '/home';
    }
  },
  {
    path: '/redirected-page',
    component: RedirectedPage
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

解释说明：

1. 静态重定向：

   • 在路由配置中使用 redirect 属性可以直接指定重定向的目标路径。例如，访问根路径 / 时会自动重定向到 /home。

2. 动态重定向：

   • 使用函数形式的 redirect 可以根据条件动态决定重定向的目标路径。例如，访问 /redirect 路径时，可以根据查询参数 redirect 的存在与否来决定最终重定向到哪个页面。

3. 创建路由实例：

   • 使用 createRouter 和 createWebHistory 来创建一个 Vue Router 实例，并将定义好的路由规则传递给它。

4. 导出路由实例：

   • 最后将创建好的路由实例导出，以便在主应用中使用。