vue2.0开发实践总结之疑难篇

export default { data () { return {  msg: 'header' } }}

export default{ data: function () {}, //data一定要是返回一个函数  components: {  comHeader: Header //声明组件 } }

<template> <div class="com-app">  <com-header></com-header> //注意，html不区分大小写，所以需要将 comHeader 写成 com-header  </div></template>

data：  //vue对象的数据methods： //vue对象的方法watch： //对象监听的方法computed： //计算逻辑放到computed中created： //属性已绑定，dom未生成，一般在这里进行ajax处理以及页面初始化处理

const store = new Vuex.Store({ state: { comm: {  loading: false, //是否显示loading  apiUrl: 'http://www.sherlochao.com:9091/photosharing/', //接口base url  imgUrl: 'http://www.sherlochao.com:9091/filebase', //图片base url  indexConf: {  isFooter: true, // 是否显示底部  isSearch: true, // 是否显示搜索  isBack: false, // 是否显示返回  isShare: false, // 是否显示分享  title: '' // 标题  } } }})

const store = new Vuex.Store({mutations: { //loading的显示 isLoading: (state, status) => {  state.comm.loading = status }, //修改header的信息 changeIndexConf: (state, data) => {  Object.assign(state.comm.indexConf, data) }})

export default { data: function () {  return {} }, computed: {  isShowSearch: function () {  return this.$store.state.comm.indexConf.isSearch //获取vuex里面 state 状态值  },  title: function () {  return this.$store.state.comm.indexConf.title  },  isBack: function () {  return this.$store.state.comm.indexConf.isBack  } }}

<template> <div class="header"> <div v-show="isShowSearch"></div> <div class="title" v-show="!isShowSearch">  <a v-show="isBack" class="back t-icon" @click="goBack"><span  class="iconfont icon icon-xiangzuojiantou"></span></a>  <p>{{title}}</p> </div> </div></template>

export default {  created: function () {  vm.$store.commit('changeIndexConf', {  isFooter: false,  isSearch: false,  isBack: true,  isShare: true,  title: '详情页'  })  } }

export default { watch: { '$route' (to, from) {  // 对路由变化作出响应... } }} 

router.beforeEach(function (to,from,next) { var userMsg = localStorage.getItem('userMsg') if(to.path === '/home'){ if(!userMsg){  next({ path: '/login' }) } } next()})