快捷導(dǎo)航

vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例

更新時(shí)間：2017年11月10日 10:47:47 作者：zhaohaixin0418

下面小編就為大家?guī)?lái)一篇vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在項(xiàng)目中，一般我們的導(dǎo)航都是長(zhǎng)的基本一致，只是內(nèi)容會(huì)根據(jù)上個(gè)頁(yè)面的內(nèi)容而改變。那么我們只需要把頂部導(dǎo)航作為獨(dú)立的公共組件，這樣方便哪里需要哪里引入組件即可。

公共導(dǎo)航代碼如下：（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: "個(gè)人資料的頭部"
  }
 },
 methods: {
  back: function(){
   this.$router.go('-1');
  }
 }
}
</script>

其次eg：在某個(gè)頁(yè)面中，有三個(gè)模塊，需要根據(jù)不同的模塊跳轉(zhuǎn)到一個(gè)公共的組件，但是頭部?jī)?nèi)容，要跟模塊內(nèi)容匹配。如下：

<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>過(guò)期</p>
  </aside>
 </section>
 </section>
 </section>
</template>
<style scoped>
</style>
<script>
export default {
 data() {
  return {
   sortList: [
    {'list': '觀影兌換券', },
    {'list': '室內(nèi)樂(lè)兌換券', },
    {'list': '沙龍兌換券', }
   ],
  };
 },
 methods: {
  toNext: function(index) {
   sessionStorage.ticketName =this.sortList[index].list;
   this.$router.push('/mine/tiketOrder');
  }
 },
};
</script>

最后界面如下：

然后我們需要點(diǎn)擊每個(gè)模塊，跳轉(zhuǎn)到下個(gè)頁(yè)面，并且導(dǎo)航內(nèi)容也變成對(duì)應(yīng)的內(nèi)容。在其路由頁(yè)面tiketOrder.vue頁(yè)面需要如下寫(xiě)，

<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': '過(guò)期', }
   ],
  };
 },
 components: {
  MineHeader,
 },
 created() {
  this.ticketName = sessionStorage.getItem('ticketName');
 },
};
</script>

最后如下圖：