uni-simple-router

主题

On this page

捕捉路由404 ​

Watch a free video lesson on official

在 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)=>{
		
	}
})