Vue.js--防刷新动态设置网页标题我是保存在Vuex中，所以用的store store.js文件在route中配置

我是保存在Vuex中，所以用的store

store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    title:""
  },
  mutations:{
    changeTitle(state, data) {
       state.title = data
    }
  }
})

在route中配置meta元信息记录title值

export default new Router({
  routes:[{
    path: '/',
    name: 'Login',
    component: Login,
    meta: {
      title: "首页"
    }
  }]
})

在main.js中配置相关代码

//刷新保存状态
if (sessionStorage.getItem("storeData")) {
  store.replaceState(Object.assign({},store.state,JSON.parse(sessionStorage.getItem("storeData"))));
  sessionStorage.removeItem("storeData")
}

//监听，在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
  sessionStorage.setItem("storeData",JSON.stringify(store.state));
});

//路由发生变化修改页面title
router.beforeEach((to,from,next)=>{
  if(to.meta.title) {
    store.commit('changeTitle', to.meta.title)
	document.title = store.state.title
    }
    next()
})

记得在index.html中要设置一下初始的标题，不然刷新会有数据闪一下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>头部标题</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>