Vue-router 是 Vue.js 中一个非常重要的插件，它可以帮助我们实现前端路由功能，让我们的应用可以像传统的多页面应用一样，通过 URL 来跳转到不同的页面。但是在使用 Vue-router 的过程中，我们可能会遇到一些问题，比如子路由不显示的问题。在本篇文章中，我们将会详细讲解这个问题的原因以及如何解决它。
问题描述
在 Vue-router 中，我们可以使用子路由来实现页面的嵌套。比如我们有一个父页面 /home，它下面有两个子页面 /home/news 和 /home/about。我们可以通过如下的代码来实现这个功能：
----- ------ - --- -----------
------- -
-
----- --------
---------- -----
--------- -
-
----- -------
---------- ----
--
-
----- --------
---------- -----
-
-
-
-
--这样，当我们访问 /home/news 或者 /home/about 的时候，就会分别显示 News 和 About 组件。但是有时候，我们可能会遇到这样的问题：子路由不显示。即当我们访问 /home 的时候，它的子路由 /home/news 和 /home/about 并没有被显示出来。
问题原因
这个问题的原因是因为我们在父组件中没有添加 <router-view> 标签。<router-view> 标签是 Vue-router 中的一个非常重要的标签，它用来显示当前路由所对应的组件。而在我们的父组件中，我们没有添加 <router-view> 标签，所以子路由的组件也就无法被显示出来。
解决方法
解决这个问题的方法非常简单，我们只需要在父组件中添加 <router-view> 标签即可。修改后的代码如下：
----------
-----
-------------
------------ ----------------------------------
------------ ------------------------------------
---------------------------
------
-----------
--------
------ ------- -
----- ------
-
---------在这个代码中，我们在 <div> 标签中添加了 <router-view> 标签。这样，当我们访问 /home 的时候，子路由的组件就可以被正确地显示出来了。
示例代码
下面是一个完整的示例代码，供大家参考：
----------
-----
-------------
------------ ----------------------------------
------------ ------------------------------------
---------------------------
------
-----------
--------
------ ---- ---- ------------
------ ----- ---- -------------
------ ------- -
----- -------
----------- -
-----
-----
-
-
---------
------ -------
-- -
---------- -----
------------ -----
-
--------总结
在本篇文章中，我们讲解了 Vue-router 的子路由不显示的问题，以及解决这个问题的方法。我们发现，这个问题的原因非常简单，只是我们忘记了在父组件中添加 <router-view> 标签。因此，在开发过程中，我们需要时刻注意这个问题，避免出现类似的错误。同时，我们也需要深入理解 Vue-router 的原理，才能更好地使用它，开发出更加高效、稳定的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6633dbf4d3423812e4173667