需求:整個專案;每個專案都有頭部 但是內容不一樣;這種情況我們可以考慮在app.vue中建立公共頭部;

App.vue

<template>
  	<div id="app">
		<div class="header" v-if="isShowHeader" id="headers">
          <span class="title-info">{{headerTitle}}</span> 
	    </div>
	</div>
</template>
<script>
import { mapState } from "vuex";
import home from "../src/components/home";

export default {
  name: "App",
  data() {
    return {

    };
  },
  computed: {
    // 儲存到store狀態管理中
    ...mapState({
      headerTitle: state => state.$vux.headerTitle,
    })
  },
 
};
</script>
 

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
          }
        },
    ]


})