架构使用vuex结合vue-meta实现router动态设置meta标签

可以通过引入vue-meta模块，通过路由守卫监听获取到路由中meta的定义的值，再将获取到的值赋值到vuex中module模块中的state，再将模块中的值通过vue-meta模块中的metaInfo方法修改meta标签

参考：/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中去mit("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

exportdefault({ namespaced:true, state:{ metaInfo:{ title:"", keywords:"", description:"" } }, mutations:{ CAHNGE_META_INFO(state,metaInfo){ state.metaInfo=metaInfo; } }, actions:{ }, modules:{ } })