做者:Parthiv Mohan翻译:疯狂的技术宅javascript
原文:https://alligator.io/vuejs/ne...css
未经容许严禁转载html
随着 Vue.js 单页应用(SPA)变得至关复杂,你开始须要 Vue 路由以及嵌套路由。嵌套路由容许更复杂的用户界面以及相互嵌套的组件。让咱们建立一个相对简单的用例,来展现 Vue Router 中嵌套路由的实用性。前端
若是还没有安装,请运行如下命令全局安装 Vue CLI:vue
$ npm install -g @vue/cli
或者java
$ yarn global add @vue/cli
如今你能从命令行运行 vue
命令了。让咱们建立一个名为 alligator-nest 的 Vue 应用:程序员
$ vue create alligator-nest
在提示符下选择默认预设(按 Enter 键)。以后,运行如下命令:web
$ npm install vue-router
而后,在你选择的编辑器中打开 alligator-nest
目录。面试
如下 CSS 将帮助咱们为 UI 定位元素。将其做为样式表文件添加到 public/
文件夹中,并在 public/index.html
中引用它。为此,咱们将使用 CSS grid:vue-router
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> <div id="app"> <h1 class="row1 col12">Alligator Nest</h1> <a class="row1 col3">Travels</a> <a class="row1 col4">About</a> <div class="row2 col234"></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
属性颇有用!如今咱们能够开始建立路由了。
在 /components
文件夹中建立一个名为 AboutPage.vue
的组件。它看起来像这样:
<template> <div> <h2>About</h2> <p>Alligators were around during the time of the dinosaurs.</p> </div> </template> <script> export default { name: 'AboutPage', } </script> <style scoped> </style>
如今咱们的 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"
的 <router-link>
标签。而后,将第二个 div
更改成 <router-view>
标签。确保保持网格定位类属性不变。
如今,咱们有了一个功能齐全的站点框架,并为 “About” 页面处理了路由。
咱们在此重点介绍路由功能,所以不会在样式上话费太多时间。尽管如此,咱们也要让Travels
页面看起来更精致一些。
首先,建立一个 TravelPage
,方法与建立 AboutPage
相同。在 main.js
中引用它。
还须要建立如下两个组件,这些组件最终将嵌套在 TravelPage.vue
中:
TravelAmericaPage.vue
<template> <div> <p>Alligators can be found in the American states of Louisiana and Florida.</p> </div> </template> <script> export default { name: 'TravelAmericaPage' } </script> <style scoped> </style>
TravelChinaPage.vue
<template> <div> <p>Alligators can be found in China's Yangtze River Valley.</p> </div> </template> <script> export default { name: 'TravelChinaPage' } </script> <style scoped> </style>
如今,让咱们同时更新 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
<template> <div id="travel"> <h2 class="row1">Travels</h2> <div class="flex-container row2"> <router-link to="/travel/america">America</router-link> <router-link to="/travel/china">China</router-link> </div> <router-view class="row3"></router-view> </div> </template> <script> export default { name: 'TravelPage' } </script> <style scoped> div { text-align: center; } #travel { display: grid; grid-template-rows: 20% 40% 40%; } .flex-container { display: flex; justify-content: space-around; } </style>
检出 localhost:8080
,你将看到 Travels 页面中包含 2 个子页面!当你单击任一连接时,咱们的 URL 也会相应更新。
但愿本教程对你了解如何使用嵌套路由有帮助!
关于该主题的其余注意事项——咱们可使用动态段定义路由,例如 path:'/location/:id'
。而后在这些路由的视图上,能够将该 id 引用为 this.$route.params
。当你但愿在网站和应用上显示更多特定类型的数据(用户、图片等)时,此功能很是有用。