处理 URIError：使用 vue-router 的 URI 格式错误答案

【问题标题】：Handling URIError: URI malformed with vue-router处理 URIError：使用 vue-router 的 URI 格式错误
【发布时间】：2020-07-01 12:56:42
【问题描述】：

我在我的网站中遇到了一个负面情况，有人在 URL 的末尾附加了%，在这种情况下我们得到了URIError: URI malformed。有时，页面会停止渲染。我正在使用 Vue-Router 进行路由，我尝试了 router.beforeResolve 和 router.beforeEach 方法，但它们没有被调用。我想做这样的事情来解决这个问题：

try {
   decodeURI(uri)
   next();
} catch(e) {
   // If malformed URI error, don't go to URI, else next();
}

令人困惑的是我应该把这段代码放在哪里？在这种情况下会调用哪个 Vue 路由器方法？路由器代码与此类似：

const router = new VueRouter({
    routes: [
        ARoute,
        BRoute,
    ],
});

【问题讨论】：

当有人在 url 末尾附加 % 时，你希望 vue-router 做什么？
@lukaszmtw 我对 vue-router 了解不多，但我想通过重定向到 404 页面或至少在某处捕获此错误来优雅地处理这种情况，这样页面就不会冻结。

标签： vue.js uri vue-router

【解决方案1】：

如果不修改vue-router 代码，您将无能为力，因为解码正在那里进行。 vue-router 的 Github repo 上的This issue 可能与它有关。

【讨论】：