在使用 Vue-Router 搭建前端路由时，层级嵌套模式是经常使用的一种方式。但是在这种模式下，我们可能遇到一个导航条的 BUG，即当前激活的菜单项与当前页面的路由不匹配。在本篇文章中，我将详细介绍这个 BUG 的原因，以及如何解决它。
导航条 BUG 的原因
首先，我们来看一下出现 BUG 的原因。当我们使用 Vue-Router 的层级嵌套模式时，我们在父组件中使用了 <router-link> 组件来渲染一个子路由的链接。这时，Vue-Router 的默认行为是将父组件的路由加上子路由的路径拼接起来作为最终的路径。
例如，我们有一个 App 组件，它有一个嵌套的子路由 Foo，我们在 App 组件中使用 <router-link> 组件来渲染这个子路由的链接：
<router-link to="/foo">Go to Foo</router-link>
这时，在我们点击这个链接后，Vue-Router 会自动将父组件的路由加上子路由的路径拼接起来，最终生成的路径是 /app/foo。
但是，当我们在一个层级嵌套的子路由中也使用 <router-link> 组件来渲染另一个子路由的链接时，Vue-Router 的默认行为会出现问题。它依然会将父组件的路由加上这个子路由的路径拼接起来，但这不是我们想要的：
<!-- 在 Foo 组件中使用 <router-link> 渲染 Bar 组件的链接 --> <router-link to="/bar">Go to Bar</router-link>
这里的 Bug 就出现了：当我们点击这个链接时，Vue-Router 会将父组件的路由 /app/foo 加上子路由的路径 /bar，最终生成的路径是 /app/foo/bar，而不是 /bar。
这个问题主要是源于 Vue-Router 的默认行为假设所有子路由的路径都应该是相对于父路由的路径的一部分。但对于嵌套的子路由，我们需要指定一个绝对路径，以避免这种 Bug。
解决导航条 BUG
为了解决这个导航条的 BUG，我们需要让 Vue-Router 忽略嵌套路由关系，直接使用子路由的绝对路径。这可以通过在 <router-link> 组件上添加 replace 和 append 属性来实现。
具体来说，我们需要将 <router-link> 组件的 replace 属性设置为 true，这样就可以将当前路由替换成新的路由，而不是将新路由添加到当前路由队列的末尾：
<router-link to="/bar" replace>Go to Bar</router-link>
同时，我们还需要将 <router-link> 组件的 append 属性设置为 true，这样就可以在子路由上自动添加当前父路由的路径：
<!-- 在 Foo 组件中使用 <router-link> 渲染 Bar 组件的链接 --> <router-link to="/bar" replace append>Go to Bar</router-link>
通过设置这两个属性，我们就可以保证当前激活的菜单项与当前页面的路由匹配了。
示例代码
下面是一个完整的示例代码，展示了使用层级嵌套模式的 Vue-Router 如何解决导航条的 BUG：
-- -------------------- ---- -------
----------
-----
---- --- ---
-----
----
--- --------- ------- ----------- --- ------ ---
---- - --- ----- ------------- -- --- ----- ---
------------ ------------ -- -----------------
-----
--- --------- ------- ----------- --- ------ ---
---- - --- ----- ------------- -- --- ----- ---
------------ --------- ------- --------- -- -----------------
-----
-----
------
---- ---- ---
---------------------------
------
-----------
--------
------ ------- -
----- ------
-
---------在这个代码中，我们有一个 App 组件，它有一个嵌套的子路由 Foo。在 App 组件中使用 <router-link> 组件来渲染这个子路由的链接。在 Foo 组件中，我们同样使用 <router-link> 组件来渲染另一个子路由的链接，并添加了 replace 和 append 属性来避免导航条的 BUG。
结论
在使用 Vue-Router 的层级嵌套模式时，可能会遇到一个导航条的 BUG。这个问题主要是源于 Vue-Router 的默认行为假设所有子路由的路径都应该是相对于父路由的路径的一部分。但对于嵌套的子路由，我们需要指定一个绝对路径，以避免这种 Bug。
为了解决这个导航条的 BUG，我们可以在 <router-link> 组件上添加 replace 和 append 属性，让 Vue-Router 忽略嵌套路由关系，直接使用子路由的绝对路径。这样，我们就可以保证当前激活的菜单项与当前页面的路由匹配了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711d306ad1e889fe201059a