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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
JavaScript 接口原理与用法实例详解
May 12 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
php字符串函数学习之substr()
2015/03/27 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python实现在线翻译
2020/06/18 Python
python 图像增强算法实现详解
2021/01/24 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
银行职员思想汇报
2013/12/31 职场文书
雷锋之歌观后感
2015/06/10 职场文书
Python实现列表拼接和去重的三种方式
2021/07/02 Python
Java无向树分析 实现最小高度树
2022/04/09 Javascript
Python如何加载模型并查看网络
2022/07/15 Python