Vue Router 的重定向基础和复杂用法详解指南

大家好！我是书中枫叶，今天我们来唠唠 关于vue Router 的重定向用法

前言

当使用Vue Router构建单页面应用程序时，路由重定向是一个非常有用的功能，它可以将用户从一个路由导航到另一个路由。在Vue Router中，重定向可以基于路径、命名路由、参数和查询参数进行设置。

前端开发的同学肯定在日常实际业务中熟悉到除了Vue Router可以实现正常导航页面还会涉及到前端项目的路由权限控制、错误处理、条件性渲染、动态路由等等的核心功能的实现。

下面详细介绍Vue Router的重定向用法：基础的路由重定向、复杂的路由重定向 来展开

基础的路由重定向：

1. 基于路径的重定向

const routes = [
  { path: '/old-path', redirect: '/new-path' }
];

这将会把 /old-path 重定向到 /new-path。

2. 基于命名路由的重定向

Vue Router允许你使用命名路由进行重定向，这使得你可以通过路由的名称来进行导航。

const routes = [
  { path: '/example', name: 'example', component: ExampleComponent },
  { path: '/redirect', redirect: { name: 'example' } }
];

在这个例子中，访问 /redirect 会重定向到命名为 'example' 的路由。

3. 带参数的重定向

有时候，你可能需要将路由重定向到带有参数的路由。Vue Router允许你通过编程方式构建目标路径。

const routes = [
  { path: '/users/:id', component: UserProfile },
  { path: '/profile', redirect: to => `/users/${to.params.id}` }
];

在这个示例中，/profile 路由会根据当前路由的参数值动态重定向到 /users/:id。

4. 带查询参数的重定向

重定向还可以包含查询参数，这使得你可以在导航时传递一些额外的信息。

const routes = [
  { path: '/search', component: Search },
  { path: '/search-results', redirect: '/search?query=example' }
];

在这里，当访问 /search-results 时，它会重定向到 /search?query=example，带有查询参数。

5. 相对重定向

const routes = [
  {
    // 将总是把/users/123/posts重定向到/users/123/profile。
    path: '/users/:id/posts',
    redirect: to => {
      // 该函数接收目标路由作为参数
      // 相对位置不以`/`开头
      // 或 { path: 'profile'}
      return 'profile'
    },
  },
]

5. 动态重定向

有时你可能需要更复杂的逻辑来决定重定向目标。你可以使用一个函数来动态计算重定向目标：

const routes = [
  { path: '/admin', component: AdminPanel, beforeEnter: requireAdmin },
  { path: '/dashboard', redirect: dynamicDashboard }
];

function requireAdmin(to, from, next) {
  // 检查用户是否有管理员权限，根据情况进行重定向
  if (userHasAdminPrivileges()) {
    next();
  } else {
    next('/login'); // 如果没有权限，重定向到登录页
  }
}

function dynamicDashboard(to) {
  // 根据用户角色和其他条件动态计算重定向目标
  if (userIsAdmin()) {
    return '/admin';
  } else {
    return '/user-dashboard';
  }
}

复杂的路由重定向

当涉及到复杂的路由重定向时，使用Vue Router提供的导航守卫（Navigation Guards）来实现更高级的逻辑、处理各种复杂的重定向情况。导航守卫允许你在路由导航过程中进行拦截和控制，以执行自定义逻辑，包括重定向。

• beforeEach: 在路由导航之前执行，用于检查认证状态和权限等。
• beforeResolve: 在路由导航被解析之前执行。
• afterEach: 在路由导航完成之后执行，通常用于日志记录或清理任务。

条件性重定向

根据用户是否已经登录来决定是否重定向到登录页面。

const router = new VueRouter({
  routes: [
    { path: '/dashboard', component: Dashboard },
    { path: '/profile', component: UserProfile },
    { path: '/login', component: Login },
    { path: '*', redirect: '/dashboard' } // 404重定向到仪表板
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkUserAuthentication(); // 自定义函数检查用户认证状态

  if (to.path === '/login' && isAuthenticated) {
    // 如果用户已登录，重定向到仪表板
    next('/dashboard');
  } else if (to.path !== '/login' && !isAuthenticated) {
    // 如果用户未登录且不是前往登录页，重定向到登录页
    next('/login');
  } else {
    next(); // 放行路由
  }
});

function checkUserAuthentication() {
  // 在这里检查用户是否已登录，返回true或false
  return userIsAuthenticated;
}

重定向到外部链接

有时需要将用户重定向到外部链接，比如社交媒体页面或其他网站。可以使用window.location来实现。

const router = new VueRouter({
  routes: [
    { path: '/social', redirect: toExternalLink }
  ]
});

function toExternalLink() {
  window.location.href = 'https://www.example.com'; // 重定向到外部链接
}

带有认证和权限的重定向

根据用户的认证状态和角色来决定是否重定向到受保护的路由或错误页面。

const router = new VueRouter({
  routes: [
    { path: '/admin', component: AdminPanel },
    { path: '/user', component: UserDashboard },
    { path: '/error-403', component: ForbiddenError },
    { path: '*', redirect: '/user' } // 404重定向到用户仪表板
  ]
});

router.beforeEach((to, from, next) => {
  const isAuthenticated = checkUserAuthentication(); // 自定义函数检查用户认证状态
  const isAdmin = checkUserAdminRole(); // 自定义函数检查用户角色

  if (to.path === '/admin') {
    if (isAuthenticated && isAdmin) {
      next();
    } else {
      next('/error-403'); // 未认证或非管理员用户重定向到403错误页面
    }
  } else {
    next(); // 放行其他路由
  }
});

function checkUserAuthentication() {
  // 检查用户是否已登录，返回true或false
  return userIsAuthenticated;
}

function checkUserAdminRole() {
  // 检查用户角色是否为管理员，返回true或false
  return userIsAdmin;
}

多步重定向

根据用户的角色动态重定向到不同的目标。

const router = new VueRouter({
  routes: [
    { path: '/admin', component: AdminPanel },
    { path: '/user', component: UserDashboard },
    { path: '/dashboard', redirect: redirectToDashboard }
  ]
});

function redirectToDashboard() {
  if (userIsAdmin()) {
    return '/admin'; // 管理员重定向到管理员面板
  } else {
    return '/user'; // 非管理员重定向到用户仪表板
  }
}

function userIsAdmin() {
  // 检查用户角色是否为管理员，返回true或false
  return userIsAdmin;
}

动态路由参数的重定向

如果路由包含动态参数，可以在导航守卫中根据参数值进行不同的重定向。

const router = new VueRouter({
  routes: [
    { path: '/users/:id', component: UserProfile },
    { path: '/profile/:id', redirect: redirectToUserProfile }
  ]
});

function redirectToUserProfile(to) {
  const userId = to.params.id;

  if (userId === 'admin') {
    return '/admin-profile'; // 根据参数值重定向到不同的用户
  } else {
    return `/user-profile/${userId}`;
  }
}

总结

Vue Router的重定向功能非常强大，可以根据不同的需求进行设置。无论是基于路径、命名路由、参数还是查询参数，我们都可以根据自己的需求设置重定向。从简单的路径重定向到复杂的条件性和动态重定向，通过合理使用重定向，可以改善用户体验并导航用户到正确的页面。

最后，希望这篇文章能帮助你更好地理解和使用Vue Router的重定向功能。

不明白之处或者需要补充的地方可以评论区留言，期待和各位大佬的交流😊