uni-simple-router

主题

On this page

重定向及别名 ​

Watch a free video lesson on official

在 uni-simple-router 中，你可以使用重定向和别名来管理路由。

重定向（redirect）是指当用户访问某个路由时，自动将其重定向到另一个指定的路由。这对于将用户导航到默认页面或处理特定的路由重定向非常有用。

js
const routes = [
  {
    path: '/',
    redirect: '/home',
    component:IndexComponent
  },
  {
    path: '/home',
    component: HomeComponent
  }
];

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

字符串重定向 ​

在配置路由表时，你可以将 redirect 设置为目标 URL 字符串，当访问该路由时，用户将被重定向到 redirect 指定的目标 URL 。下面是一个示例：

js
const routes = [
  {
    path: '/',
    redirect: '/home',
    component:IndexComponent
  },
  {
    path: '/home',
    component: HomeComponent
  }
];

当用户访问根路径 / 时，会自动重定向到 /home 路由。

对象重定向 ​

redirect 还可以使用对象的方式进行配置，以完成重定向。你可以指定 redirect 属性为一个包含 name 、 params 和 query 字段的对象，以便在重定向时传递参数。下面是一个示例：

js
const routes = [
  {
    path: '/',
    redirect: {
      name:`home`,
      query:{
        name:`hhyang`
      }
    },
    component:IndexComponent
  },
  {
    path: '/home',
    name:`home`,
    component: HomeComponent
  }
];

当用户访问根路径 / 时，可以通过设置 redirect 属性来实现自动重定向到 · 路由，并附带上查询参数 name=hhyang。这样，用户访问的完整路径将变为 /home?name=hhyang。

函数重定向 ​

redirect 还可以以函数形式进行配置，类似于调用 router.replace 方法。该函数会接收两个参数：to 表示目标路由的元信息，from 表示出发时的路由元信息。你可以在函数内部根据需要进行逻辑处理，并返回一个路由对象来实现重定向。需要注意的是，该函数只支持同步操作，不支持异步等待。以下是一个示例代码：

js
const routes = [
  {
    path: '/',
    redirect: (to, from) => {
      // 根据需要进行逻辑处理
      if (from.path === '/login') {
        // 如果是从登录页面跳转过来，则重定向到首页
        return { name: 'home' };
      } else {
        // 其他情况重定向到新路径
        return '/new-path';
      }
    },
    component:IndexComponent
  },
  {
    path: '/home',
    name:`home`,
    component: HomeComponent
  }
];

路径别名 ​

在 uni-simple-router 中，你可以使用路径别名来简化路由路径的定义。通过为路由表中的某个路径配置 aliasPath 属性，可以为该路径定义别名。当用户访问别名路径时，会自动重定向到原始路径上，实现路径的映射和简化。

以下是一个示例代码，展示如何使用路径别名：

js
const routes = [
  {
    path: '/original-path',
    aliasPath: `/alias-path1`,
    component: OriginalComponent,
  }
]

在上述示例中，/original-path 是原始路径，OriginalComponent 是对应的组件。通过 aliasPath 属性，将 /original-path 定义为 /alias-path1 的别名。当用户访问 /alias-path1 时，会自动重定向到 /original-path，并加载对应的组件。

温馨提示

当前版本的 uni-simple-router 已完全接管了 uni-app 的页面路径管理，因此建议使用 path 属性来定义最终的路径，而不是使用 aliasPath。尽管 aliasPath 在之前的版本中可以用来定义路径别名，但为了提高代码的一致性和可维护性，它在未来的版本中可能会被移除。

因此，建议将之前使用 aliasPath 定义的路径改为使用 path 属性，以确保代码的兼容性和可持续性