介绍
隨著 Vue.js 單頁應用程式 (SPA) 變得相當複雜,您開始需要 Vue Router,而且還需要嵌套路線。
在本文中,您将构建一个示例Vue.js项目,突出了嵌套路径的实用性。
前提条件
要完成本教程,您将需要:
- Node.js 本地安装,您可以按照 如何安装 Node.js 和创建本地开发环境进行操作。 *对 设置 Vue.js 项目和 使用 Vue.js 组件的一些熟悉可能是有益的.
本教程已通过 Node v16.5.0、npm v7.20.0、vue v2.6.14 和vue-router v3.5.2 进行验证。
步骤1 - 设置项目
要快速设置项目,本文将建议使用 @vue/cli。
<$>[注]
**注:**本文将采用使用npx的方法,以避免全球安装@vue/cli;
<$>
1npx @vue/cli create vue-nested-routes-example
当提示配置选项时,您可能希望 手动选择功能并包括 路由器。
然后,导航到新创建的项目目录:
1cd vue-nested-routes-example
如果您在创建时没有安装Vue Router,您可以将其添加到您的项目(https://router.vuejs.org/installation.html#vue-cli)。
步骤二:构建应用程序
下面的CSS将帮助我们为我们的用户界面定位元素。
在公共目录中,创建一个grid.css文件:
1[label public/grid.css]
2.row1 {
3 grid-row-start: 1;
4 grid-row-end: 2;
5}
6
7.row12 {
8 grid-row-start: 1;
9 grid-row-end: 3;
10}
11
12.row123 {
13 grid-row-start: 1;
14 grid-row-end: 4;
15}
16
17.row2 {
18 grid-row-start: 2;
19 grid-row-end: 3;
20}
21
22.row23 {
23 grid-row-start: 2;
24 grid-row-end: 4;
25}
26
27.row3 {
28 grid-row-start: 3;
29 grid-row-end: 4;
30}
31
32.col1 {
33 grid-column-start: 1;
34 grid-column-end: 2;
35}
36
37.col12 {
38 grid-column-start: 1;
39 grid-column-end: 3;
40}
41
42.col123 {
43 grid-column-start: 1;
44 grid-column-end: 4;
45}
46
47.col1234 {
48 grid-column-start: 1;
49 grid-column-end: 5;
50}
51
52.col2 {
53 grid-column-start: 2;
54 grid-column-end: 3;
55}
56
57.col23 {
58 grid-column-start: 2;
59 grid-column-end: 4;
60}
61
62.col234 {
63 grid-column-start: 2;
64 grid-column-end: 5;
65}
66
67.col3 {
68 grid-column-start: 3;
69 grid-column-end: 4;
70}
71
72.col34 {
73 grid-column-start: 3;
74 grid-column-end: 5;
75}
76
77.col4 {
78 grid-column-start: 4;
79 grid-column-end: 5;
80}
我们将使用 CSS 网格 。
将grid.css添加到index.html:
1[label public/index.html]
2<!DOCTYPE html>
3<html lang="">
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width,initial-scale=1.0">
8 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9 <link rel="stylesheet" href="grid.css">
10 <title><%= htmlWebpackPlugin.options.title %></title>
11 </head>
12 <body>
13 <noscript>
14 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 </noscript>
16 <div id="app"></div>
17 <!-- built files will be auto injected -->
18 </body>
19</html>
接下来,让我们对@vue/cli创建的默认文件做一些更改。
在代码编辑器中打开App.vue,然后在App.vue中对HTML标记进行以下修改:
1[label src/App.vue]
2<template>
3 <div id="app">
4 <h1 class="row1 col12">Example</h1>
5 <a class="row1 col3">About</a>
6 <a class="row1 col4">Nested Pages</a>
7 <div class="row2 col234"></div>
8 </div>
9</template>
在App.vue中使用 CSS 样式:
1[label src/App.vue]
2html, body {
3 height: 100vh;
4 width: 100vw;
5 padding: 0;
6 margin: 0;
7}
8
9#app {
10 font-family: Avenir, Helvetica, Arial, sans-serif;
11 -webkit-font-smoothing: antialiased;
12 -moz-osx-font-smoothing: grayscale;
13 color: #2c3e50;
14 padding: 2%;
15 height: 100%;
16 display: grid;
17 grid-template-rows: 20% 80%;
18 grid-template-columns: 25% 25% 25% 25%;
19}
将更改保存到您的文件中。
然后在您的终端中运行以下命令:
1npm run serve
在您的 Web 浏览器中访问「localhost:8080」并观察网格布局。
现在我们可以开始路线。
步骤 3 – 应用Vue路由
@vue/cli将创建一个main.js文件:
1[label src/main.js]
2import Vue from 'vue'
3import App from './App.vue'
4import router from './router'
5
6Vue.config.productionTip = false
7
8new Vue({
9 router,
10 render: h => h(App)
11}).$mount('#app')
然后打开一个router/index.js文件:
1[label src/router/index.js]
2import Vue from 'vue'
3import VueRouter from 'vue-router'
4import Home from '../views/Home.vue'
5
6Vue.use(VueRouter)
7
8const routes = [
9 {
10 path: '/',
11 name: 'Home',
12 component: Home
13 },
14 {
15 path: '/about',
16 name: 'About',
17 // route level code-splitting
18 // this generates a separate chunk (about.[hash].js) for this route
19 // which is lazy-loaded when the route is visited.
20 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
21 }
22]
23
24const router = new VueRouter({
25 mode: 'history',
26 base: process.env.BASE_URL,
27 routes
28})
29
30export default router
Home.vue和About.vue文件位于Views目录中。
让我们重新浏览App.vue并将 About的标签更改为具有to="/about属性的<router-link>标签。
1[label src/App.vue]
2<template>
3 <div id="app">
4 <h1 class="row1 col12">Example</h1>
5 <router-link to="/about" class="row1 col3">About</router-link>
6 <a class="row1 col4">Nested Pages</a>
7 <router-view class="row2 col234" />
8 </div>
9</template>
我们现在有一个功能的网站骨骼,为关于页面处理路由。
步骤4 - 构建一个嵌套的视角
我们在这里专注于路由功能,所以我们不会对风格产生幻想,尽管如此,巢页面将看起来更精细。
首先,在视图目录中创建一个NestedPages.vue文件:
1[label src/views/NestedPages.vue]
2<template>
3 <div id="nested">
4 <h2 class="row1">Nested Pages</h2>
5 </div>
6</template>
7
8<script>
9 export default {
10 name: 'NestedPages'
11 }
12</script>
13
14<style scoped>
15div {
16 text-align: center;
17}
18</style>
并在路由器/index.js中引用它:
1[label src/router/index.js]
2import Vue from 'vue'
3import VueRouter from 'vue-router'
4import Home from '../views/Home.vue'
5import NestedPages from '../views/NestedPages.vue'
6
7Vue.use(VueRouter)
8
9const routes = [
10 {
11 path: '/',
12 name: 'Home',
13 component: Home
14 },
15 {
16 path: '/about',
17 name: 'About',
18 // route level code-splitting
19 // this generates a separate chunk (about.[hash].js) for this route
20 // which is lazy-loaded when the route is visited.
21 component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
22 },
23 {
24 path: '/nested',
25 component: NestedPages
26 }
27]
28
29const router = new VueRouter({
30 mode: 'history',
31 base: process.env.BASE_URL,
32 routes
33})
34
35export default router
此外,创建以下两个组件,这些组件最终将嵌入NestedPages.vue。
创建一个NestedPageOne.vue文件:
1[label src/components/NestedPageOne.vue]
2<template>
3 <div>
4 <p>Nested Page One</p>
5 </div>
6</template>
7
8<script>
9 export default {
10 name: 'NestedPageOne'
11 }
12</script>
13
14<style scoped>
15</style>
然后创建一个类似的NestedPageTwo.vue文件:
1[label src/components/NestedPageTwo.vue]
2<template>
3 <div>
4 <p>Nested Page Two</p>
5 </div>
6</template>
7
8<script>
9 export default {
10 name: 'NestedPageTwo'
11 }
12</script>
13
14<style scoped>
15</style>
最后,重新浏览App.vue并更新嵌入式页面链接以使用<router-link>:
1[label src/App.vue]
2<template>
3 <div id="app">
4 <h1 class="row1 col12">Example</h1>
5 <router-link to="/about" class="row1 col3">About</router-link>
6 <router-link to="/nested" class="row1 col4">Nested Pages</router-link>
7 <router-view class="row2 col234" />
8 </div>
9</template>
此时,你有一个新的巢路线和两个新的组件。
步骤5 - 配置巢的儿童路径
重定向NestedPages.vue,并为 Nested Page One和 Nested Page Two添加<路由器链接>。
1[label src/views/NestedPages.vue]
2<template>
3 <div id="nested">
4 <h2 class="row1">Nested Pages</h2>
5 <div class="flex-container row2">
6 <router-link to="/nested/one">Nested Page One</router-link>
7 <router-link to="/nested/two">Nested Page Two</router-link>
8 </div>
9 <router-view class="row3" />
10 </div>
11</template>
12
13<script>
14 export default {
15 name: 'NestedPages'
16 }
17</script>
18
19<style scoped>
20div {
21 text-align: center;
22}
23
24#nested {
25 display: grid;
26 grid-template-rows: 20% 40% 40%;
27}
28
29.flex-container {
30 display: flex;
31 justify-content: space-around;
32}
33</style>
现在,让我们更新路由器/index.js来引用那些使用孩子的嵌套路线。
1[label router/index.js]
2// ...
3
4import NestedPageOne from '../components/NestedPageOne.vue'
5import NestedPageTwo from '../components/NestedPageTwo.vue'
6
7// ...
8
9const routes = [
10 // ...
11 {
12 path: '/nested',
13 component: NestedPages,
14 children: [
15 {
16 path: '/nested/one',
17 component: NestedPageOne
18 },
19 {
20 path: '/nested/two',
21 component: NestedPageTwo
22 }
23 ]
24 },
25 // ...
26];
27
28// ...
<$>[注] 注: 请注意,儿童的巢穴可以持续无限期。
将更改保存到您的文件中。
然后在您的终端中运行以下命令:
1npm run serve
当您访问/nested路线时,您可以访问NestedPageOne和NestedPageTwo儿童路线。
结论
在本文中,您构建了一个Vue.js项目示例,突出了嵌套路径的实用性。
其他要注意的事情 - 我们可以使用动态细分定义的路径,例如‘路径:‘/位置/:id’。然后,在这些路径的视图中,我们可以将该 id 称为‘this.$route.params’。