vue2导航根据路由传值,而改变导航内容的实例
程序员文章站
2022-06-17 11:49:55
在项目中,一般我们的导航都是长的基本一致,只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件,这样方便哪里需要哪里引入组件即可。
公共导航代码...
在项目中,一般我们的导航都是长的基本一致,只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件,这样方便哪里需要哪里引入组件即可。
公共导航代码如下:(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>
最后界面如下:
然后我们需要点击每个模块,跳转到下个页面,并且导航内容也变成对应的内容。在其路由页面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导航根据路由传值,而改变导航内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。