修复 fillParams
函数
首先,查看左侧文件的目录结构如下:
├── vue-router-3.1.5
├── vue.js
└── index.html
点击WebIDE右下角的 Go Live 按钮来运行项目。
在虚拟机顶部打开 “Web 8080” 并手动刷新,效果应如下所示:
将上图中的地址复制到浏览器中打开新窗口,分别点击 “[按钮1]” 按钮和 “[按钮2]” 按钮,地址栏的效果如下:
在这一步中,你将修复 vue-router-3.1.5/src/util/params.js
文件中的 fillParams
函数,以解决 pathMatch
为空的问题。
打开 vue-router-3.1.5/src/util/params.js
文件。
找到 fillParams
函数。
在 if (params.pathMatch) params[0] = params.pathMatch
这行代码之后添加以下代码:
if (params.pathMatch === "") params[0] = "";
这段代码检查 params.pathMatch
是否为空字符串。如果是,函数将返回原始的 path
,而不是尝试填充参数。
更新后的 fillParams
函数应如下所示:
export function fillParams(
path: string,
params:?Object,
routeMsg: string
): string {
params = params || {};
try {
const filler =
regexpCompileCache[path] ||
(regexpCompileCache[path] = Regexp.compile(path));
// 修复 #2505 解析星号路由 { name: 'not-found', params: { pathMatch: '/not-found' }}
if (params.pathMatch) params[0] = params.pathMatch;
if (params.pathMatch === "") params[0] = "";
return filler(params, { pretty: true });
} catch (e) {
if (process.env.NODE_ENV!== "production") {
// 修复 #3072 如果 `pathMatch` 是字符串则不发出警告
warn(
typeof params.pathMatch === "string",
`missing param for ${routeMsg}: ${e.message}`
);
}
return "";
} finally {
// 如果添加了 0 则删除它
delete params[0];
}
}