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 相关文章推荐
js中关于String对象的replace使用详解
May 24 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
详解vue中移动端自适应方案
May 05 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 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
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
JavaScript闭包详解
2015/02/02 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
了解重排与重绘
2019/05/29 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
python list语法学习(带例子)
2013/11/01 Python
python采集博客中上传的QQ截图文件
2014/07/18 Python
基于python编写的微博应用
2014/10/17 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python实现逻辑回归的示例
2020/10/09 Python
理财投资建议书
2014/03/12 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
会计学专业求职信
2014/07/17 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
责任书范本大全
2015/05/11 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis
MySQL的索引你了解吗
2022/03/13 MySQL
Java 定时任务技术趋势简介
2022/05/04 Java/Android