架構使用vuex結合vue-meta實現router動態設置meta標簽

可以通過引入vue-meta模塊，通過路由守衛監聽獲取到路由中meta的定義的值，再將獲取到的值賦值到vuex中module模塊中的state，再將模塊中的值通過vue-meta模塊中的metaInfo方法修改meta標簽

參考：https://www.imooc.com/article/288045

 

1、安裝

npm install vue-meta -S

npm install vuex -S

2、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vueMeta from 'vue-meta'
Vue.use(vueMeta)
Vue.config.productionTip = false;
new Vue({
  router,
  store,
　// 通過vue-meta中的metaInfo()方法把從vuex的模塊metaModule中state獲取到的值設置到代碼中
  metaInfo() {
    return {
      title: this.$store.state.metaModule.metaInfo.title,
      meta: [
        {
          name: "keywords",
          content: this.$store.state.metaModule.metaInfo.keywords
        }, {
          name: "description",
          content: this.$store.state.metaModule.metaInfo.description
        }
      ]
    }
  },
  render: h => h(App)
}).$mount('#app')

3、router.js

const routes = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue'),
        meta: {
　　　　　　　　// 在路由中設置meta中需要的信息
            metaInfo: {
                title: "首頁 title",
                keywords: "首頁 keywords",
                description: "首頁 description"
            }
        }
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('../views/About.vue'),
        meta: {
            metaInfo: {
                title: "關於 title",
                keywords: "關於 keywords",
                description: "關於 description"
            }
        }
    }
]

export default routes

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from "./router"
import store from "../store"
Vue.use(VueRouter)
const router = new VueRouter({
  routes
});
// 全局前置守衛
router.beforeEach((to, from, next) => {
  console.log(to);
  console.log(from);
  if (to.meta.metaInfo) {
　　// 調用vuex的metaModule模塊中的方法將從獲取路由中到的值賦值到vuex的metaModule模塊中的state中去
    store.commit("metaModule/CAHNGE_META_INFO", to.meta.metaInfo)
  }
  next()
})
// 全局解析守衛
// 在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用
router.beforeResolve((to, from, next) => {
  console.log(to);
  console.log(from);
  next()
})
// 全局后置狗子
router.afterEach((to, from) => {
  // ...
  console.log(to);
})

export default router

4、store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import metaModule from './modules/vueMeta'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
　　// 引入模塊
    metaModule: metaModule
  }
})

store/modules/vueMeta/index.js

export default ({

    namespaced: true,

    state: {

        metaInfo: {

            title: "",

            keywords: "",

            description: ""

        }

    },

    mutations: {

        CAHNGE_META_INFO(state, metaInfo) {

            state.metaInfo = metaInfo;

        }

    },

    actions: {

    },

    modules: {

    }

})

 

在某個單獨頁面修改metaInfo,這個會覆蓋router.js中的路由中metaInfo

<template>
  <div>
    <h1>{{{ title }}}</h1>
  </div>
</template>

<script>
  export default {
    name: 'post',
    data () {
      return {
        title: '',
        keywords: '',
        description: '這是一篇文章...'
      }
    },
    metaInfo () {
      return {
        title: this.title,
        meta: [
          { vmid: 'keywords', name: 'keywords', content: this.description },
          { vmid: 'description', name: 'description', content: this.description }
        ]
      }
    },
    created () {
      this.initData()
    },
    methods: {
      initData () {
        axios.get('some/url').then((resp) => {
          // 設置title時 metaInfo 會同時更新
          this.title = resp.title
          this.description = resp.decription
        })
      }
    }
  }
</script>