如果想要做的移動端APP跳轉不同的頁面，每個頁面呈現的標題不一樣怎麼辦(使用VUX作為樣式庫）

一、直接引進寫在相應頁面

每個頁面引進一遍Xhead，按照不同頁面所需要的標題寫出相應的內容。

該方式簡潔明瞭易懂，但是程式碼量會猛然增加。

二、使用父元件、子元件、Vuex的方式

做一個父頁面，父頁面裡只有標題，其餘內容在子頁面填充。

為了使在子頁面跳轉的時候標題也隨之改變，就應該運用vuex傳輸資料。

首先在父元件設定傳輸的值

<template>
  <div class="hello">
    <view-box  ref="viewbox">
      <x-header class="vux-demo-header-box" :left-options="{showBack: true}" slot="header" style="position: absolute;">{{msg}}</x-header>
      <router-view/>
    </view-box>
  </div>
</template>
<script>
import { Tabbar, TabbarItem, Group, Cell, XHeader, ViewBox, XButton } from 'vux'
export default {
  name: 'App',
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    XHeader,
    ViewBox,
    XButton
  },
  computed: {
    msg: function () {
      return this.$store.state.headerTitle
    }
  }
}
</script>
 

然後在vuex（首先需要安裝vuex。相關內容點選此處）中引入該值。

最後在子頁面中，將這個值傳輸過來，並在頁面重新整理的時候把標題渲染出來。

<script>
import { Step, StepItem, XButton, Group, XInput, Panel, XHeader, XDialog } from 'vux'
export default {
  data () {
    return {
      msg: '通訊測試'
    }
  }
  created: function () {
    this.$store.commit('setHeaderTitle', this.msg)
    this.init()
  }
}
 

這樣便成功啦。