单页应用（SPA）页面的多级路由是前端开发中常见的技术，也是提高用户交互体验和页面访问效率的重要手段。但在实际开发中，多级路由可能会引起一些坑，需要注意。
引起的问题
路由嵌套
多级路由经常会出现路由嵌套的情况。例如，我们有这样一个路由配置：
-- -------------------- ---- -------
----- ------ - -
-
----- ----
---------- ----
--
-
----- ---------
---------- ------
--------- -
-
----- -------
---------- ----
--
-
----- ----------
---------- -------
-
-
-
--在这种情况下，访问 /about 路径时会渲染 About 组件，但这个组件只是一个容器，它包含了子路由 team 和 contact。这时候要渲染子组件，需要使用 <router-view> 标签。但如果在 About 组件中不加上这个标签，子组件就无法渲染。
动态路由
多级路由还有可能包含动态路由参数，例如：
const routes = [
{
path: "/product/:id",
component: Product
}
];当我们通过路径访问 /product/123 时，这个 123 就是一个动态的参数，表示商品的 ID 值。在 Product 组件中可以通过 $route.params.id 获得这个值。
但是，如果在多级路由中包含动态路由参数，例如：
-- -------------------- ---- -------
----- ------ - -
-
----- ---------
---------- ------
--------- -
-
----- -----------
---------- ----
--
-
----- ----------
---------- -------
-
-
-
--访问 /about/team/123 时，这个 123 就是动态路由参数。但是，在 Team 组件中通过 $route.params.id 获取不到这个值。这是因为动态路由参数只对当前路由组件生效。如果要在父组件中使用，需要使用 $route.matched 对象获得当前路由信息，进而获得动态路由参数。
路由重定向
在多级路由中，还可能需要进行路由重定向，将一个路径转发到另外一个路径。例如：
-- -------------------- ---- -------
----- ------ - -
-
----- ---------
---------- ------
--------- -
-
----- ---
--------- ------
--
-
----- -------
---------- ----
--
-
----- ----------
---------- -------
-
-
-
--这个配置将 /about 路径重定向到 /about/team 路径。但是，如果在 About 组件中不使用 $router.replace 方法重定向，而是直接写成 <router-link to="/about">About</router-link>，那么在页面刷新后就会出现问题。这是因为浏览器刷新时会重新加载整个应用程序，而不会触发重定向操作。所以需要在代码中使用 $router.replace 方法进行重定向。
解决方法
针对上述问题，我们可以采取以下方法避免或解决。
路由嵌套
在多级路由中，一定记得加上 <router-view> 标签，这样子路由才能正确渲染。如果某个父级组件不想渲染子路由，可以不加这个标签，在子路由组件中使用单独的 router-view 标签进行渲染。
动态路由
在多级路由中包含动态路由参数时，可以使用 $route.matched 对象获取当前路由信息，进而获得动态路由参数。例如，在 Team 组件中可以这样写：
computed: {
productId() {
return this.$route.matched[1].params.id;
}
}这个方法会获取路由参数中序号为 1 的路径信息，即 /about/team/:id 中的 :id。
路由重定向
在进行路由重定向时，一定要使用 $router.replace 方法，而不是直接写 <router-link to="/about">About</router-link>。如果需要在重定向后刷新页面，可以加上 location.reload() 方法。
完整的示例代码如下：
-- -------------------- ---- -------
----------
-----
------------ -----------------------------------
------------ -----------------------------------------
------
---------------------------
-----------
--------
------ ------- -
--------- -
-- -------
-- ------------------------------------- -
------------------------------------
------------------
-
-
--
---------总结
在使用多级路由时，一定要注意路由嵌套、动态路由和路由重定向等问题，并使用相应的解决方法避免或解决这些问题。这样可以提高代码质量和效率，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd7edf95b1f8cacdcddccf