主题
命名路由
除了为路由提供 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
中,跳转页面时可以使用 params
和 query
进行参数传递,它们有以下区别:
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
进行页面跳转时,你可以根据实际需求选择使用 params
或 query
进行参数传递,或者两者结合使用。