主题
捕捉路由404
在 uni-simple-router v3.0
版本之前,捕捉路由的 404
错误通常需要开发者自己定义一个路由表中的通配符 *
,然后在其中处理 404
错误的情况。然而,这种方法存在一些潜在的问题,例如路由表的顺序可能导致通配符提前触发匹配,而无法正确匹配到真正的路由。
为了改善这个问题,在 uni-simple-router v3.0
版本中,我们引入了更方便的方式来捕捉路由的 404
错误。你只需要在特定的生命周期钩子中处理即可。
生命钩子 routeNotFound
你可以通过在创建路由对象时传递 routeNotFound
生命钩子来完成路由的 404
捕捉。
以下是一个示例:
js
import {
createRouter,
type platformRule
} from '@/uni-simple-router'
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM as platformRule,
routeNotFound:(to)=>{
console.log(to)
return {
name:`404`,
query:{
args:`routeNotFound`
}
}
},
routes:[{
path: `/404`,
name: `404`,
component: __dynamicImportComponent__('@/components/404.vue',{
pageType: `top`,
})
}]
})
在上述代码中,我们已经配置了 routeNotFound
生命钩子,它会在导航到不存在的路径时触发。该钩子接收一个 to
参数,其中包含了触发该生命钩子时的导航信息。你可以利用该钩子返回一个新的目标导航对象,以便跳转到一个有效的地址。
请注意,routeNotFound
生命钩子的返回参数与调用 router.push 等导航 API
时的参数一致,可以包含 path
、query
、params
等属性。另外该生命钩子只支持同步调用,不支持异步等待。
通过以上配置,当用户访问不存在的路由时,将会触发 routeNotFound 生命钩子,并根据你的处理逻辑返回新的目标导航对象,从而实现跳转到一个有效地址。
异步返回 v1.1.0+
你可以返回一个Promise
来决定新的导航地址,如果返回 reject
或者返回 空
那将默默失败。
js
// 2秒后返回结果
const router = createRouter({
routeNotFound:async (to)=>{
console.log(to)
await timeOut(2000)
return {
name:`404`,
navType:`push`
}
}
})
// 或者
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routeNotFound:(to)=>{
return new Promise(async (resolve)=>{
await timeOut(2000)
return resolve({
name:`404`,
navType:`push`
})
})
}
})
// 或者拒绝 == 匹配失败
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routeNotFound:(to)=>{
return new Promise(async (resolve,reject)=>{
await timeOut(2000)
reject();
})
}
})
// 或者返回空 == 匹配失败
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routeNotFound:(to)=>{
}
})