vue2导航根据路由传值,而改变导航内容的实例


Posted in Javascript onNovember 10, 2017

在项目中,一般我们的导航都是长的基本一致,只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件,这样方便哪里需要哪里引入组件即可。

公共导航代码如下:(mineHeader.vue)

<template>
 <section class="listHeader">
 <section class="header" @click="back()">
  <img src="../../assets/main/back.png" alt="">
  <p>{{mineHeaderData}}</p>
 </section>
 </section>
</template>
<script>
export default {
 name: 'MineHeader',
 props:{
  mineHeaderData:String
 },
 data () {
  return {
   msg: "个人资料的头部"
  }
 },
 methods: {
  back: function(){
   this.$router.go('-1');
  }
 }
}
</script>

其次eg:在某个页面中,有三个模块,需要根据不同的模块跳转到一个公共的组件,但是头部内容,要跟模块内容匹配。如下:

<template>
 <section class="tiket">
 <section class="top" v-for="(item, index) in sortList" @click="toNext(index)">
  <section>
  <h3>{{item.list}}</h3>
  <img src="../../assets/main/right.png">
  </section>
 <section class="middle">
  <aside>
  <p>可用</p>
  <p>已用</p>
  <p>过期</p>
  </aside>
 </section>
 </section>
 </section>
</template>
<style scoped>
</style>
<script>
export default {
 data() {
  return {
   sortList: [
    {'list': '观影兑换券', },
    {'list': '室内乐兑换券', },
    {'list': '沙龙兑换券', }
   ],
  };
 },
 methods: {
  toNext: function(index) {
   sessionStorage.ticketName =this.sortList[index].list;
   this.$router.push('/mine/tiketOrder');
  }
 },
};
</script>

最后界面如下:

vue2导航根据路由传值,而改变导航内容的实例

然后我们需要点击每个模块,跳转到下个页面,并且导航内容也变成对应的内容。在其路由页面tiketOrder.vue页面需要如下写,

<template>
 <section class="tiket">
 <MineHeader :mineHeaderData='ticketName'></MineHeader>
 <section class="top" v-for="(item, index) in sotList">
  <section>
  <h3>{{ticketName}}</h3>
  </section>
  <section class="middle">
  <aside class="left">
   <p>{{item.list}}</p>
   <p>有效期</p>
  </aside>
  </section>
 </section>
 </section>
</template>
<script>
import MineHeader from '../common/mineHeader.vue';
export default {
 name: 'tiketOrder',
 data() {
  return {
   ticketName: '',
   sotList: [
    {'list': '可用', },
    {'list': '已用', },
    {'list': '过期', }
   ],
  };
 },
 components: {
  MineHeader,
 },
 created() {
  this.ticketName = sessionStorage.getItem('ticketName');
 },
};
</script>

最后如下图:

vue2导航根据路由传值,而改变导航内容的实例

这样就完成了。其实一个项目中,很多组件是可以复用的,这样我们可以少写很多组件。

以上这篇vue2导航根据路由传值,而改变导航内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
three.js加载obj模型的实例代码
Nov 10 #Javascript
vue router-link传参以及参数的使用实例
Nov 10 #Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 #Javascript
js+html获取系统当前时间
Nov 10 #Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 #Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 #Javascript
JS+Canvas绘制动态时钟效果
Nov 10 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
sails框架的学习指南
2014/12/22 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python实现的一个p2p文件传输实例
2014/06/04 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
如何在python中实现随机选择
2019/11/02 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
护士在校生自荐信
2014/02/01 职场文书
大学生就业意向书范文
2014/04/01 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
冰雪公主观后感
2015/06/16 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android