vue.js Router中嵌套路由的实用示例


Posted in Vue.js onJune 27, 2021

前言

随着 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(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。当你希望在网站和应用上显示更多特定类型的数据(用户、图片等)时,此功能非常有用。

到此这篇关于vue.js Router中嵌套路由的文章就介绍到这了,更多相关vue.js嵌套路由内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
ant design vue的form表单取值方法
Jun 01 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
vue-router中hash模式与history模式的区别
Vue-Element-Admin集成自己的接口实现登录跳转
Vue + iView实现Excel上传功能的完整代码
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
You might like
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
vue组件name的作用小结
2018/05/23 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
python运行其他程序的实现方法
2017/07/14 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python如何制作英文字典
2019/06/25 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
优秀医生事迹材料
2014/02/12 职场文书
2014年审计工作总结
2014/11/17 职场文书
锅炉工岗位职责
2015/02/13 职场文书
人口与计划生育责任书
2015/05/09 职场文书
Redis三种集群模式详解
2021/10/05 Redis