Vue-router Prompts Warning Info: Route with path <some-path> contains unencoded characters

[univic]

问题描述

使用npm run dev完成编译后，在http://localhost:8080/查看页面，在浏览器开发者工具->Console中，能看到大量warning信息，诸如：

[vue-router] Route with path "/《JavaScript教程》笔记/04.异步操作.html" contains unencoded characters, make sure your path is correctly encoded before passing it to the router. Use encodeURI to encode static segments of your path. warn @ vue-router.esm.js?8c4f:16 [vue-router] Route with path "/《JavaScript教程》笔记/01.基础.html" contains unencoded characters, make sure your path is correctly encoded before passing it to the router. Use encodeURI to encode static segments of your path. warn @ vue-router.esm.js?8c4f:16

复现

1. 通过git clone 拉取vuepress-theme-vdoing的master分支
2. cd vuepress-theme-vdoing
3. 执行npm install
4. 执行npm run dev
5. 在浏览器中打开http://localhost:8080/
6. 在浏览器开发者工具->Console中，能看到warning信息

系统环境

• Windows 10 20H2 19042.1348
• node.js: v14.15.1
• Microsoft Edge Version 96.0.1054.29

依赖环境

• @vuepress/core: 1.8.0
• @vue-router: 3.5.3
• vuepress-theme-vdoing: 1.8.5

一个推测

vue-router在 3.4.6版本引入了潜在破坏性更改。自 3.4.6 起，vue-router 要求所有非标准 URL 路径都必须先 encodeURI 再作为路径添加到 router 中

预期修复后效果

浏览器开发者Console不产生异常warning信息

[Dragon1573]

复现方式

使用 Docker 执行如下命令，启动测试环境：

# 在宿主执行
docker run -itd -p 8080:8080 --name issue_519  node:14.15.1 /bin/bash
docker exec -it issue_519 /bin/bash

# 在容器执行
mkdir -v /workspace && cd /workspace
git clone https://github.com/xugaoyi/vuepress-theme-vdoing.git && cd vuepress-theme-vdoing/
npm install && npm run dev

打开浏览器，打开「开发人员工具 → 控制台」。

复现结论

在当前 master 分支的最新版本 85260f5cbe957efb5dc29df405ef3e86c62906c8 下，此问题依然存在。

系统环境

• Windows 11 Professional 22H2
  • OS Version: 22621.674
  • Windows Feature Experience Pack: 1000.22634.1000.0
• Docker Desktop for Windows v4.12.0
  • Image: node:14.12.1
• Microsoft Edge
  • Architecture: x64
  • Version: 107.0.1418.24 (Stable)

依赖环境

• @vuepress/core@1.9.5
• vue-router@3.6.5
• vuepress-theme-vdoing@1.12.8

[jacky1234]

I met the same issue