移动端APP跳转时变动head内容的方式

如果想要做的移动端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()
  }
}

这样便成功啦。