如果想要做的移动端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()
}
}
这样便成功啦。