这篇文章主要为大家详细介绍了vue2导航根据路由传值,而改变导航内容的实例,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
在项目中,一般我们的导航都是长的基本一致,只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件,这样方便哪里需要哪里引入组件即可。
代码如下:
<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>
最后界面如下:
【q1010.com温馨提示:图片暂缺】
然后我们需要点击每个模块,跳转到下个页面,并且导航内容也变成对应的内容。在其路由页面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>
最后如下图:
【q1010.com温馨提示:图片暂缺】
这样就完成了。其实一个项目中,很多组件是可以复用的,这样我们可以少写很多组件。
以上这篇vue2导航根据路由传值,而改变导航内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/4340-0.html
注:关于vue2导航根据路由传值,而改变导航内容的实例的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。