vue router 重定向

// Vue Router 重定向示例

// 定义路由配置
const routes = [
  {
    path: '/',
    redirect: '/home' // 当访问根路径时，重定向到 /home
  },
  {
    path: '/home',
    component: Home // 假设 Home 是一个组件
  },
  {
    path: '/login',
    redirect: to => {
      // 动态重定向，可以根据条件返回不同的路径
      if (!isAuthenticated()) {
        return '/auth';
      } else {
        return '/dashboard';
      }
    }
  }
];

// 创建路由实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

// 挂载路由到 Vue 实例
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

解释说明：

1. 静态重定向：在路由配置中使用 redirect 属性可以实现静态重定向。例如，当用户访问根路径 / 时，会自动重定向到 /home。
2. 动态重定向：可以通过传递一个函数给 redirect 来实现动态重定向。这个函数接收当前的路由对象 to 作为参数，并根据逻辑返回不同的路径。例如，未认证的用户会被重定向到 /auth，而认证过的用户则被重定向到 /dashboard。