vue2導航根據路由傳值,而改變導航內容的實例

2019-11-19 14:57:11

字體：大中小

來源：轉載

供稿：網友

在項目中，一般我們的導航都是長的基本一致，只是內容會根據上個頁面的內容而改變。那么我們只需要把頂部導航作為獨立的公共組件，這樣方便哪里需要哪里引入組件即可。

公共導航代碼如下：（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>

最后如下圖：