随着 Vue.js 单页应用(SPA)变得相当复杂，你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例，来展示 Vue Router 中嵌套路由的实用性。
用 Vue CLI 进行设置
如果尚未安装，请运行以下命令全局安装 Vue CLI：
$npminstall-g@vue/cli 或者
$yarnglobaladd@vue/cli 现在你能从命令行运行 vue 命令了。让我们创建一个名为 alligator-nest 的 Vue 应用：
$vuecreatealligator-nest 在提示符下选择默认预设(按 Enter 键)。之后，运行以下命令：
$npminstallvue-router 然后，在你选择的编辑器中打开 alligator-nest 目录。
基本代码
以下 CSS 将帮助我们为 UI 定位元素。将其作为样式表文件添加到 public/ 文件夹中，并在 public/index.html 中引用它。为此，我们将使用 CSS grid：
grid.css：
.row1{ grid-row-start:1; grid-row-end:2; } .row12{ grid-row-start:1; grid-row-end:3; } .row123{ grid-row-start:1; grid-row-end:4; } .row2{ grid-row-start:2; grid-row-end:3; } .row23{ grid-row-start:2; grid-row-end:4; } .row3{ grid-row-start:3; grid-row-end:4; } .col1{ grid-column-start:1; grid-column-end:2; } .col12{ grid-column-start:1; grid-column-end:3; } .col123{ grid-column-start:1; grid-column-end:4; } .col1234{ grid-column-start:1; grid-column-end:5; } .col2{ grid-column-start:2; grid-column-end:3; } .col23{ grid-column-start:2; grid-column-end:4; } .col234{ grid-column-start:2; grid-column-end:5; } .col3{ grid-column-start:3; grid-column-end:4; } .col34{ grid-column-start:3; grid-column-end:5; } .col4{ grid-column-start:4; grid-column-end:5; } 接下来，让我们对 vue-cli 添加的默认文件进行一些更改。
从 src/components 文件夹中删除 HelloWorld.vue，并从 src/App.vue 中删除所有与其相关的东西。对 App.vue 中的 HTML 标记和 CSS 样式进行以下修改。
<template> <divid="app"> <h1class="row1col12">AlligatorNest</h1> <aclass="row1col3">Travels</a> <aclass="row1col4">About</a> <divclass="row2col234"></div> </div> </template> html,body{ height:100vh; width:100vw; padding:0; margin:0; } #app{ font-family:Avenir,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#2c3e50; padding:2%; height:100%; display:grid; grid-template-rows:20%80%; grid-template-columns:25%25%25%25%; } 如果你在项目的根目录中运行 npm run serve，则可以将鼠标悬停在浏览器中的 localhost:8080 上，并查看框架布局。那些 display:grid 属性很有用!现在我们可以开始创建路由了。
输入 Vue 路由
在 /components 文件夹中创建一个名为 AboutPage.vue 的组件。它看起来像这样：
<template> <div> <h2>About</h2> <p>Alligatorswerearoundduringthetimeofthedinosaurs.</p> </div> </template> <script> exportdefault{ name:'AboutPage', } </script> <stylescoped> </style>
现在我们的 main.js 文件需要 /about 路由。它看起来像这样。
importVueRouterfrom'vue-router'; importVuefrom'vue'; importAppfrom'./App.vue'; Vue.config.productionTip=false; importVueRouterfrom'vue-router'; Vue.use(VueRouter); importAboutPagefrom'./components/AboutPage.vue'; constroutes=[ {path:'/about',component:AboutPage}, ] constrouter=newVueRouter({ routes }) newVue({ render:h=>h(App), router }).$mount('#app'); 最后，让我们回到 App.vue，并将 “About” 的锚标记更改为属性为 to="/about"的 标签。然后，将第二个 div 更改为 标签。确保保持网格定位类属性不变。
现在，我们有了一个功能齐全的站点框架，并为 “About” 页面处理了路由。
我们在此重点介绍路由功能，因此不会在样式上话费太多时间。尽管如此，我们也要让Travels 页面看起来更精致一些。
首先，创建一个 TravelPage，方法与创建 AboutPage 相同。在 main.js 中引用它。
还需要创建以下两个组件，这些组件最终将嵌套在 TravelPage.vue 中：
TravelAmericaPage.vue
<template> <div> <p>AlligatorscanbefoundintheAmericanstatesofLouisianaandFlorida.</p> </div> </template> <script> exportdefault{ name:'TravelAmericaPage' } </script> <stylescoped> </style>
TravelChinaPage.vue
<template> <div> <p>AlligatorscanbefoundinChina'sYangtzeRiverValley.</p> </div> </template> <script> exportdefault{ name:'TravelChinaPage' } </script> <stylescoped> </style>
配置嵌套路由
现在，让我们同时更新 main.js 和 TravelPage.vue，以使用 children 来引用这些嵌套路由。必须将 main.js 更新为对 routes 常量具有以下定义：
constroutes=[ { path:'/travel',component:TravelPage, children:[ {path:'/travel/america',component:TravelAmericaPage}, {path:'/travel/china',component:TravelChinaPage} ] }, { path:'/about',component:AboutPage } ]; 请注意，子级的嵌套可以无限继续下去。
并且 TravelPage.vue 可以通过以下方式编写：
TravelPage.vue：
<template> <divid="travel"> <h2class="row1">Travels</h2> <divclass="flex-containerrow2"> <router-linkto="/travel/america">America</router-link> <router-linkto="/travel/china">China</router-link> </div> <router-viewclass="row3"></router-view> </div> </template> <script> exportdefault{ name:'TravelPage' } </script> <stylescoped> div{ text-align:center; } #travel{ display:grid; grid-template-rows:20%40%40%; } .flex-container{ display:flex; justify-content:space-around; } </style> div { text-align: center;}#travel { display: grid; grid-template-rows: 20% 40% 40%;}.flex-container { display: flex; justify-content: space-around;}
检出 localhost:8080，你将看到 Travels 页面中包含 2 个子页面!当你单击任一链接时，我们的 URL 也会相应更新。
总结
希望本教程对你了解如何使用嵌套路由有帮助!
关于该主题的其他注意事项——我们可以使用动态段定义路由，例如 path:'/location/:id'。然后在这些路由的视图上，可以将该 id 引用为 this.$route.params。当你希望在网站和应用上显示更多特定类型的数据(用户、图片等)时，此功能非常有用。
原文地址：https://mp.weixin.qq.com/s?__biz=MzI3NzIzMDY0NA==&mid=2247500306&idx=1&sn=9c7562082ad301696f860bf2db46d104&chksm=eb6be749dc1c6e5f64808c3ebf6044bf569f34956a3cf264f3843850963edaca90a96609e81b&mpshare=1&s
