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 相关文章推荐
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
Three.js学习之几何形状
Aug 01 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
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
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
用JS实现选项卡
2020/03/23 Javascript
python fabric实现远程部署
2017/01/05 Python
Django入门使用示例
2017/12/12 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
《四季》教学反思
2014/04/08 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
公司聚餐通知
2015/04/22 职场文书
费城故事观后感
2015/06/10 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android