vue router redirect

作者：世界哪有真情发布日期:2025-08-13 浏览:90

// Vue Router 的重定向功能可以通过在路由配置中使用 redirect 属性来实现。

const routes = [
  {
    path: '/old-path',
    redirect: '/new-path' // 当用户访问 /old-path 时，会自动重定向到 /new-path
  },
  {
    path: '/dashboard',
    redirect: { name: 'home' } // 通过命名路由进行重定向
  },
  {
    path: '/login',
    redirect: to => {
      // 动态重定向，可以根据条件返回不同的路径
      if (isLoggedIn) {
        return '/dashboard';
      } else {
        return '/login-page';
      }
    }
  }
];

const router = new VueRouter({
  routes
});

解释说明：

静态重定向：直接在 redirect 属性中指定目标路径。例如，当用户访问 /old-path 时，会被重定向到 /new-path。
命名路由重定向：可以使用 { name: 'routeName' } 来重定向到命名路由。
动态重定向：通过函数形式的 redirect，可以在重定向时根据逻辑条件返回不同的路径。

上一篇：vue富文本组件

下一篇：vue关闭eslint