Vue.js中使用嵌套路由的方法介绍

PHP中文网 • 2025年3月13日 05:46:20 • 编程技术 • 阅读 2

随着 Vue.js 单页应用（SPA）变得相当复杂，你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例，来展示 Vue Router 中嵌套路由的实用性。

用 Vue CLI 进行设置

如果尚未安装，请运行以下命令全局安装 Vue CLI：

$ npm install -g @vue/cli

登录后复制

或者

$ yarn global add @vue/cli

登录后复制

现在你能从命令行运行 vue 命令了。让我们创建一个名为 alligator-nest 的 Vue 应用：

立即学习“前端免费学习笔记（深入）”；

$ vue create alligator-nest

登录后复制

在提示符下选择默认预设（按 Enter 键）。之后，运行以下命令：

$ npm install vue-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 样式进行以下修改。

      Alligator Nest
    Travels    About    
  
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 的组件。它看起来像这样：

      About
    Alligators were around during the time of the dinosaurs.
  
  export default {    name: 'AboutPage',  }

登录后复制

现在我们的 main.js 文件需要 /about 路由。它看起来像这样。

import VueRouter from 'vue-router';import Vue from 'vue';import App from './App.vue';Vue.config.productionTip = false;import VueRouter from 'vue-router';Vue.use(VueRouter);import AboutPage from './components/AboutPage.vue';const routes = [  { path: '/about', component: AboutPage },]const router = new VueRouter({  routes})new Vue({  render: h => h(App),  router}).$mount('#app');

登录后复制

最后，让我们回到 App.vue，并将 “About” 的锚标记更改为属性为 to=”/about” 的标签。然后，将第二个 div 更改为标签。确保保持网格定位类属性不变。

现在，我们有了一个功能齐全的站点框架，并为 “About” 页面处理了路由。

我们在此重点介绍路由功能，因此不会在样式上话费太多时间。尽管如此，我们也要让Travels 页面看起来更精致一些。

首先，创建一个 TravelPage，方法与创建 AboutPage 相同。在 main.js 中引用它。

还需要创建以下两个组件，这些组件最终将嵌套在 TravelPage.vue 中：

TravelAmericaPage.vue

      Alligators can be found in the American states of Louisiana and Florida.
  
  export default {    name: 'TravelAmericaPage'  }

登录后复制

TravelChinaPage.vue

      Alligators can be found in China's Yangtze River Valley.
  
  export default {    name: 'TravelChinaPage'  }

登录后复制

配置嵌套路由

现在，让我们同时更新 main.js 和 TravelPage.vue，以使用 children 来引用这些嵌套路由。必须将 main.js 更新为对 routes 常量具有以下定义：

const routes = [  {    path: '/travel', component: TravelPage,    children: [      { path: '/travel/america', component: TravelAmericaPage },      { path: '/travel/china', component: TravelChinaPage}    ]  },  {    path: '/about', component: AboutPage  }];

登录后复制

请注意，子级的嵌套可以无限继续下去。

并且 TravelPage.vue 可以通过以下方式编写：

TravelPage.vue

      Travels
          America      China    
      
  export default {    name: 'TravelPage'  }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 也会相应更新。