Vue 嵌套路由使用总结(推荐)


Posted in Javascript onJanuary 13, 2020

开发环境

Win 10

node-v10.15.3-x64.msi

下载地址:

https://nodejs.org/en/

需求场景

如下图,我们希望点击导航栏不同菜单时,导航栏下方加载不同的组件,进而展示不同的页面内容 

Vue 嵌套路由使用总结(推荐)

解决方案

使用动态路由

新建home.vue作为子页面组件

<template>
 <div>
  <h3>home Page</h3>
  <p>home page content</p>
 </div>
</template>
<script>
export default {
 name: "homePage",
};
</script>
<style scoped>
h3 {
 font-size: 30px;
}
</style>

新建nav1.vue作为子页面组件

<template>
 <div>
  <h3>nav1 Page</h3>
  <p>nav1 page content</p>
 </div>
</template>
<script>
export default {
 name: "nav1Page",
};
</script>
<style scoped>
h3 {
 font-size: 30px;
}
</style>
新建index.vue作为父页面
<template>
 <div class="container">
  <div class="nav">
   <ul>
    <li>
     <a @click="clickHome">首页</a>
    </li>
    <li>
     <a @click="clickNav1">导航1</a>
    </li>
   </ul>
  </div>
  <div class="content">
   <router-view></router-view>
  </div>
 </div>
</template>
<script>
export default {
 methods: {
  clickHome() {
   this.$router.push("/index/home");
  },
  clickNav1() {
   this.$router.push("nav1");
  }
 }
};
</script>
<style>
.nav ul {
 width: 100%;
 height: 30px;
 margin: 5px;
 padding: 0;
}
.nav ul li {
 float: left; /*横排显示*/
 list-style-type: none; /*去掉前面的点*/
}
.nav ul li a {
 width: 100px;
 display: block; /*设置为block,width才起作用*/
 height: 28px;
 line-height: 28px;
 background: grey;
 color: #fff;
 margin: 0px 1px;
 font-size: 18px;
 text-align: center;
 text-decoration: none;
}
.nav ul li a:hover {
 width: 100px;
 height: 26px;
 line-height: 28px;
 border: 1px solid red;
 color: red;
 background: #fff;
}
.content {
 position: absolute;
 top: 40px;
 bottom: 0px;
 right: 10px;
 left: 15px;
 background: rgb(176, 207, 180)
}
</style>

说明:

1、

methods: {
  clickHome() {
   this.$router.push("/index/home");
  },
  clickNav1() {
   this.$router.push("nav1");
  }
 }

点击对应“首页”菜单,“导航1”时分别触发调用这里定义了两个方法clickHome()和clickNav1(),两个方法的实现都是调用this.$router.push(),航到不同的 UR(跳转到不同的页面)。另外,push这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,可以回到之前的页面

需要注意的是,这里给push方法提供的代表路径的字符串。如果该字符串不以“/”打头,则表示相对路径,相对于父级路由的path。如果该字符串以“/”打头,则表示绝对路径的,相对于根路径“/”

例中,触发clickNav1()调用时,提供的路径字符串为“nav1”,为相对路径,父级路由路径为/index,所以点击后跳转的url路径为/index/nav1。

例中,触发clickHome()调用时,提供的路径字符串为“/index/home”,为绝对路径,所以点击后跳转的url路径为/index/home。

2、

<div class="content">
<router-view></router-view>
</div>

这里通过在父页面,即index.vue组件中添加<router-view></router-view>实现动态加载不同组件页面。点击导航菜单时,会自动加载对应的组件,然后替换<router-view>元素为对应的组件内容。

参考链接:

https://router.vuejs.org/zh/guide/essentials/navigation.html

https://router.vuejs.org/zh/guide/essentials/nested-routes.html

修改router/index.js

import Vue from "vue"
import Router from "vue-router"
import index from "@/views/index"
import home from "@/views/home"
import nav1 from "@/views/nav1"
Vue.use(Router)
export default new Router({
 mode: "history",
 routes: [
 {
  path: "/index",
  name: "index",
  component: index,
  children: [
  {
   path: "/index/home",
   name: "home",
   component: home
  },
  {
   path: "nav1",
   name: "nav1",
   component: nav1
  }
  ]
 }
 ]
})

说明:

1、vue路由通过children实现路由嵌套。个人理解,嵌套路由控制内容子组件内容的展示区:实现父组件的内容展示区保持不变,子组件内容展示区动态变化。

2、同this.$router.push(path),这里的path也分相对路径(相对于父级路由的path路径),和绝对路径(相对于“/”)。如上,/index/home为绝对路径,nav1为相对路径(其绝对路径为/index/nav1)。注意,这里path是否为绝对路径,不影响是否嵌套路由,是否嵌套路由,是通过children决定的,只是影响路由匹配。如上,如果path: "nav1",写成path: "/nav1",,那么执行this.$router.push("nav1")时,跳转的url为/index/nav1,将找不到匹配的路由

3、this.$router.push(path) 和这里routes的关系:

个人理解,执行this.$router.push(path)后,程序自动获取需要跳转的绝对url,暂且称之为toPath,然后在routes中进行匹配,如果匹配到则加载对应的组件。

总结

通过router-view实现在当前指定容器中动态加载不同组件,展示不同页面的大致实现思路:

1、 在当前页面(这里称之为父页面).vue文件template模板中的指定位置(“包含”子组件内容的容器),添加<router-view></router-view>元素

2、 router/index.js中给父页面路径所在的路由,添加子路由:子组件的加载url对应的路由

以上所述是小编给大家介绍的Vue 嵌套路由使用总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
jQuery选择器基础入门教程
May 10 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
优化Vue中date format的性能详解
Jan 13 #Javascript
JS document文档的简单操作完整示例
Jan 13 #Javascript
JavaScript数组排序小程序实现解析
Jan 13 #Javascript
JS document form表单元素操作完整示例
Jan 13 #Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 #Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 #Javascript
JS表格的动态操作完整示例
Jan 13 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
php5.2.0内存管理改进
2007/01/22 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
Javascript验证方法大全
2015/09/21 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python实现的最近最少使用算法
2015/07/10 Python
python学生管理系统代码实现
2020/04/05 Python
Python递归函数实例讲解
2019/02/27 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Python模块的制作方法实例分析
2019/12/21 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
师范毕业生自我鉴定
2014/01/15 职场文书
公司离职证明标准样本
2014/10/05 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python