Skip to content
On this page

命名路由

除了为路由提供 path 属性之外,你还可以为任何路由配置一个 name 属性。命名路由的使用具有以下优点:

  • 没有硬编码的 URL
  • params 的自动编码/解码。
  • 防止你在 URL 中出现打字错误。
  • 绕过路径排序(如显示一个)

通过为路由提供名称,你可以更加灵活和方便地管理和跳转路由。这对于构建大型应用程序或需要频繁进行路由导航的场景非常有用。

命名陷阱

请注意,为了避免冲突,确保每个命名路由都具有唯一的名称。如果你需要确保全局唯一性,你可以选择使用 ES6 中的 Symbol 类型作为命名路由的标识符。

在路由表中定义路由时,使用 name 属性为路由指定一个名称,例如:

js
const routes = [
  {
    path: '/home',
    name: 'home', 
    component: Home
  }
  {
    path: '/user/:username',
    name: 'user', 
    component: User
  }
]

确保为每个需要跳转的路由都添加了名称属性。在代码中,可以使用router.push方法或router.replace方法来跳转到命名路由。示例代码如下:

js
// 跳转到名为home的路由
router.push({ name: 'home' });

// 替换当前路由为名为home的路由
router.replace({ name: 'home' });

// 跳转到名为user的路由 并传递 username 为 erina 的值
router.push({ name: 'user', params: { username: 'erina' } })

通过命名路由进行路由跳转时,不需要指定完整的路径,只需提供路由的名称即可。

通过使用命名路由,你可以更加方便地管理和跳转路由,而无需关心具体的路径。这对于大型应用程序或需要频繁进行路由跳转的场景非常有用。

传参区别

uni-simple-router 中,跳转页面时可以使用 paramsquery 进行参数传递,它们有以下区别:

  • params 参数传递:
    • 通过 params 传递的参数是在路由路径中进行传递的,例如 /user/123,其中 123 就是一个参数。
    • params 参数适合传递一些必要且不敏感的参数,比如用户ID、文章ID等。
    • 在路由配置中,使用动态路由参数(如 /user/:id)来定义参数的接收位置。
    • 在跳转时,通过 params 字段传递参数对象,如 { params: { id: 123 } }
  • query 参数传递:
    • 通过 query 传递的参数是在 URL 查询字符串中进行传递的,例如 /user?id=123
    • query 参数适合传递一些可选的、非必要的参数,比如搜索关键字、筛选条件等。
    • 在跳转时,通过 query 字段传递参数对象,如 { query: { keyword: 'apple' } }

区别总结:

  • params 传递的参数是在路由路径中,适合传递必要且不敏感的参数。
  • query 传递的参数是在 URL 查询字符串中,适合传递可选的、非必要的参数。

在使用 uni-simple-router 进行页面跳转时,你可以根据实际需求选择使用 paramsquery 进行参数传递,或者两者结合使用。

命名路由 has loaded