vue2导航根据路由传值,而改变导航内容的实例
124 浏览量
2020-08-28
21:35:38
上传
评论
收藏 76KB PDF 举报
vue2导航根据路由传值导航根据路由传值,而改变导航内容的实例而改变导航内容的实例
下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的，现在就分享给大
家，也给大家做个参考。一起跟随小编过来看看吧
在项目中，一般我们的导航都是长的基本一致，只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的
公共组件，这样方便哪里需要哪里引入组件即可。
公共导航代码如下：（公共导航代码如下：（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>
最后界面如下：
评论0
最新资源