在 Vue.js 中使用嵌套路由

在 Vue.js 中使用嵌套路由

疯狂的技术宅 前端先锋 css

翻译:疯狂的技术宅
做者:Parthiv Mohan
来源:alligator.io
正文共:2408 字
预计阅读时间:7 分钟html

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用(SPA)变得至关复杂,你开始须要 Vue 路由以及嵌套路由。嵌套路由容许更复杂的用户界面以及相互嵌套的组件。让咱们建立一个相对简单的用例,来展现 Vue Router 中嵌套路由的实用性。前端

用 Vue CLI 进行设置

若是还没有安装,请运行如下命令全局安装 Vue CLI:vue

1$ npm install -g @vue/cli

或者web

1$ yarn global add @vue/cli

如今你能从命令行运行 vue 命令了。让咱们建立一个名为 alligator-nest 的 Vue 应用:vue-router

1$ vue create alligator-nest

在提示符下选择默认预设(按 Enter 键)。以后,运行如下命令:vue-cli

1$ npm install vue-router

而后,在你选择的编辑器中打开 alligator-nest 目录。npm

基本代码

如下 CSS 将帮助咱们为 UI 定位元素。将其做为样式表文件添加到 public/ 文件夹中,并在 public/index.html 中引用它。为此,咱们将使用 CSS grid:浏览器

grid.cssapp

1.row1 {
 2  grid-row-start: 1;
 3  grid-row-end: 2;
 4}
 5
 6.row12 {
 7  grid-row-start: 1;
 8  grid-row-end: 3;
 9}
10
11.row123 {
12  grid-row-start: 1;
13  grid-row-end: 4;
14}
15
16.row2 {
17  grid-row-start: 2;
18  grid-row-end: 3;
19}
20
21.row23 {
22  grid-row-start: 2;
23  grid-row-end: 4;
24}
25
26.row3 {
27  grid-row-start: 3;
28  grid-row-end: 4;
29}
30
31.col1 {
32  grid-column-start: 1;
33  grid-column-end: 2;
34}
35
36.col12 {
37  grid-column-start: 1;
38  grid-column-end: 3;
39}
40
41.col123 {
42  grid-column-start: 1;
43  grid-column-end: 4;
44}
45
46.col1234 {
47  grid-column-start: 1;
48  grid-column-end: 5;
49}
50
51.col2 {
52  grid-column-start: 2;
53  grid-column-end: 3;
54}
55
56.col23 {
57  grid-column-start: 2;
58  grid-column-end: 4;
59}
60
61.col234 {
62  grid-column-start: 2;
63  grid-column-end: 5;
64}
65
66.col3 {
67  grid-column-start: 3;
68  grid-column-end: 4;
69}
70
71.col34 {
72  grid-column-start: 3;
73  grid-column-end: 5;
74}
75
76.col4 {
77  grid-column-start: 4;
78  grid-column-end: 5;
79}

接下来,让咱们对 vue-cli 添加的默认文件进行一些更改。

从 src/components 文件夹中删除 HelloWorld.vue,并从 src/App.vue 中删除全部与其相关的东西。对 App.vue 中的 HTML 标记和 CSS 样式进行如下修改。

1<template>
 2  <div id="app">
 3    <h1 class="row1 col12">Alligator Nest</h1>
 4    <a class="row1 col3">Travels</a>
 5    <a class="row1 col4">About</a>
 6    <div class="row2 col234"></div>
 7  </div>
 8</template>
 9html, body {
10  height: 100vh;
11  width: 100vw;
12  padding: 0;
13  margin: 0;
14}
15
16#app {
17  font-family: Avenir, Helvetica, Arial, sans-serif;
18  -webkit-font-smoothing: antialiased;
19  -moz-osx-font-smoothing: grayscale;
20  color: #2c3e50;
21  padding: 2%;
22  height: 100%;
23  display: grid;
24  grid-template-rows: 20% 80%;
25  grid-template-columns: 25% 25% 25% 25%;
26}

若是你在项目的根目录中运行 npm run serve,则能够将鼠标悬停在浏览器中的 localhost:8080 上,并查看框架布局。那些 display:grid 属性颇有用!如今咱们能够开始建立路由了。

输入 Vue 路由

在 /components 文件夹中建立一个名为 AboutPage.vue 的组件。它看起来像这样:

1<template>
 2  <div>
 3    <h2>About</h2>
 4    <p>Alligators were around during the time of the dinosaurs.</p>
 5  </div>
 6</template>
 7
 8<script>
 9  export default {
10    name: 'AboutPage',
11  }
12</script>
13
14<style scoped>
15
16</style>

如今咱们的 main.js 文件须要 /about 路由。它看起来像这样。

1import VueRouter from 'vue-router';
 2import Vue from 'vue';
 3import App from './App.vue';
 4
 5Vue.config.productionTip = false;
 6
 7import VueRouter from 'vue-router';
 8Vue.use(VueRouter);
 9
10import AboutPage from './components/AboutPage.vue';
11
12const routes = [
13  { path: '/about', component: AboutPage },
14]
15
16const router = new VueRouter({
17  routes
18})
19
20new Vue({
21  render: h => h(App),
22  router
23}).$mount('#app');

最后,让咱们回到 App.vue,并将 “About” 的锚标记更改成属性为 to="/about" 的 <router-link> 标签。而后,将第二个 div 更改成 <router-view> 标签。确保保持网格定位类属性不变。

如今,咱们有了一个功能齐全的站点框架,并为 “About” 页面处理了路由。

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

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

还须要建立如下两个组件,这些组件最终将嵌套在 TravelPage.vue 中:

TravelAmericaPage.vue

1<template>
 2  <div>
 3    <p>Alligators can be found in the American states of Louisiana and Florida.</p>
 4  </div>
 5</template>
 6
 7<script>
 8  export default {
 9    name: 'TravelAmericaPage'
10  }
11</script>
12
13<style scoped>
14</style>

TravelChinaPage.vue

1<template>
 2  <div>
 3    <p>Alligators can be found in China's Yangtze River Valley.</p>
 4  </div>
 5</template>
 6
 7<script>
 8  export default {
 9    name: 'TravelChinaPage'
10  }
11</script>
12
13<style scoped>
14
15</style>

配置嵌套路由


如今,让咱们同时更新 main.js 和 TravelPage.vue,以使用 children 来引用这些嵌套路由。必须将 main.js 更新为对 routes 常量具备如下定义:

1const routes = [
 2  {
 3    path: '/travel', component: TravelPage,
 4    children: [
 5      { path: '/travel/america', component: TravelAmericaPage },
 6      { path: '/travel/china', component: TravelChinaPage}
 7    ]
 8  },
 9  {
10    path: '/about', component: AboutPage
11  }
12];

请注意,子级的嵌套能够无限继续下去。

而且 TravelPage.vue 能够经过如下方式编写:

TravelPage.vue

1<template>
 2  <div id="travel">
 3    <h2 class="row1">Travels</h2>
 4    <div class="flex-container row2">
 5      <router-link to="/travel/america">America</router-link>
 6      <router-link to="/travel/china">China</router-link>
 7    </div>
 8    <router-view class="row3"></router-view>
 9  </div>
10</template>
11
12<script>
13  export default {
14    name: 'TravelPage'
15  }
16</script>
17
18<style scoped>
19div {
20  text-align: center;
21}
22
23#travel {
24  display: grid;
25  grid-template-rows: 20% 40% 40%;
26}
27
28.flex-container {
29  display: flex;
30  justify-content: space-around;
31}
32</style>

检出 localhost:8080,你将看到 Travels 页面中包含 2 个子页面!当你单击任一连接时,咱们的 URL 也会相应更新。

总结

但愿本教程对你了解如何使用嵌套路由有帮助!

关于该主题的其余注意事项——咱们可使用动态段定义路由,例如 path:'/location/:id'。而后在这些路由的视图上,能够将该 id 引用为 this.$route.params。当你但愿在网站和应用上显示更多特定类型的数据(用户、图片等)时,此功能很是有用。

原文连接

https://alligator.io/vuejs/nested-routes/

相关文章
相关标签/搜索