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 相关文章推荐
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
Javascript闭包实例详解
Nov 29 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
RequireJS用法简单示例
Aug 20 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
jquery简易手风琴插件的封装
Oct 13 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使用cookie保存登录用户名的方法
2015/01/26 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
javascript globalStorage类代码
2009/06/04 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
python语音识别实践之百度语音API
2018/08/30 Python
Python并行分布式框架Celery详解
2018/10/15 Python
python绘制直方图和密度图的实例
2019/07/08 Python
django框架使用方法详解
2019/07/18 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python requests模块cookie实例解析
2020/04/14 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
一年级家长会邀请函
2014/01/25 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
导游词之安徽九华山
2019/09/18 职场文书