vue 配置公共头部(header)

需求:整个项目;每个项目都有头部 但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部;

App.vue

store.js

    import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)
    const store = new Vuex.Store({  })
    store.registerModule('$vux', { // 名字自己定义
        state: {//设置属性
            headerTitle:'',
        },
        getters:{ // getters 用来获取sate里面存储的数据

        },
         mutations: {//更改属性的状态//返回来会有两个状态一个是上面的state,还有一个是返回来的状态(形参),返回之后将我们请求回来的数据赋给state
                 getHeaderTitle(state, obj) {
                state.headerTitle = obj.headerTitle
            },
        }

    export default store

main.js

//全局配置
import Vue from "vue";
import App from "./App";
import router from "./router";

  store.commit("getHeaderTitle", { headerTitle: to.meta.title });

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  // mode: "history",
  linkActiveClass: "on",
     routes: [
        {
          path: "/business",
          name: "business",
          component: business,
          meta: {
            title: "粤警监管", // 添加该字段，表示进入这个路由是需要登录的
            keepAlive: true
          }
        },
    ]


})