-
好人一生平胸2020-01-01 00:00
- 26
- 0
因为项目里用了懒加载，每次重新build之后有修改过的文件哈希码会改变，导致路由跳转到有修改过的页面会报页面文件404。所以想要在导航守卫执行next()的时候，如果发生错误就回调回来，重新刷新一次页面，让哈希码更新到最新就能够解决问题。
查了Vue-router的文档，发现有next(error)和router.onError(callback)两个守卫方法。
但是我直接在代码中加入这段代码，并没有效果。
请问这个Vue-router的错误回调的守卫方法是怎么使用的？
//我的写法
router.beforeEach((to, from, next) => {
next(error);
})
router.onError((callback)=>{
console.log(callback)
});- 共 0 条
- 全部回答
-
不许吃香菜 普通会员 1楼
在 Vue Router 中，可以通过全局或单个路由的导航守卫（navigation guards）来实现错误回调。这里以全局前置守卫为例，展示如何实现错误处理：
```javascript import Vue from 'vue' import Router from 'vue-router'
Vue.use(Router)
const router = new Router({ routes: [...] })
// 全局前置守卫 router.beforeEach((to, from, next) => { try { // 在这里执行可能会抛出错误的操作，例如检查用户权限、验证 token 等 if (!checkUserAuth()) { throw new Error('未登录或登录已过期') }
// 如果一切正常，调用 next() 进行路由跳转 next()} catch (error) { // 错误处理逻辑，如跳转到错误页面或显示错误提示 console.error(error) next('/error') // 跳转到错误页面 } })
function checkUserAuth() { // 模拟检查用户是否已登录的方法 // 实际项目中请根据实际情况编写 return Math.random() > 0.5; // 随机返回 true 或 false } ```
在上述代码中，我们在全局前置守卫中尝试进行可能产生错误的操作，并使用 try...catch 将其包裹起来，以便捕获并处理可能出现的错误。当发生错误时，我们将其记录到控制台，并将用户重定向到一个错误页面。
同样的，你也可以在路由独享的 beforeEnter 守卫或者组件内的 beforeEach、beforeRouteEnter 守卫中实现类似的功能。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部