在 Vue.js 中使用嵌套路由
2020/3/6 14:01:28
本文主要是介绍在 Vue.js 中使用嵌套路由,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
作者:Parthiv Mohan翻译:疯狂的技术宅
原文:https://alligator.io/vuejs/ne...
未经允许严禁转载
随着 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 样式进行以下修改。
<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
属性很有用!现在我们可以开始创建路由了。
输入 Vue 路由
在 /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(V
这篇关于在 Vue.js 中使用嵌套路由的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程