头部组件的 标题 根据不同的页面显示不同的标题
第一步：
在store 里面初始化全局变量
// vuex 通过状态管理数据import Vue from ‘vue‘import Vuex from ‘vuex‘Vue.use(Vuex)const store = new Vuex.Store({ ?state: { ???// 公共 ???comm: { ?????loading: false, ?????login: { ???????memberId: ‘‘, ???????userData: ‘‘ ?????}, ?????indexConf: { ???????isFooter: false, // 是否显示底部 ???????isBack: false, ?// 是否显示返回 ???????title: ‘‘ // 标题 ?????} ???} ?}, ?mutations: { ?????/*修改header的信息*/ ???changeIndexConf: (state, data) => { ?????Object.assign(state.comm.indexConf, data) ???}, ?}, ?actions: { ?}, ?getter: { ?}})export default store第二步：
在头部组件中添加计算属性，使得title可以动态变化
<template> ???<div class="header"> ???????<div class="title"> ?????????????<a @click="goBack">< Home</a> ?????????????<span>{{title}}</span> ???????</div> ?????</div></template><script> ???export default{ ???????data: function () { ?????????????return {} ???????}, ???????//计算属性 会根据store的状态改变来动态改变 ???????computed: { ?????????????title: function () { ???????????????return this.$store.state.comm.indexConf.title ?????????????}, ????????????isBack: function () { ???????????????return this.$store.state.comm.indexConf.isBack ?????????????} ???????}, ???????methods: { ???????????goBack: function(){ ???????????????history.go(-1); ???????????} ???????} ???}</script>第三步：
在每个（引入头部组件的）页面修改自己需要的title
export default{ ???????data: function () { ???????????return { ???????????????title:‘Markets‘ ???????????} ???????}, ???????created () { ?????????????this.$store.commit(‘changeIndexConf‘, { ???????????????isFooter: false, ???????????????isBack: true, ???????????????title: ‘Markets‘ ?????????????}) ???????}, ???????components:{ ???????????comHeader:Header ???????} ???}效果：
vue+webpack新项目总结1
原文地址：http://www.cnblogs.com/rachelch/p/7744775.html