1. First save the title to be displayed locally.
if (that.PromotionInfo.Title) {
localStorage.setItem("AcTitle", that.PromotionInfo.Title)
}
2. Now set the title in the routing meta, and then set it in the routing guard.
import Vue from 'vue'
import Router from 'vue-router'
import promptDetail from './views/promptDetail'
Vue.use(Router)
const router = new Router({
routes: [
{
//活动详情
path: '/',
name: 'promptDetail',
meta:{title:localStorage.getItem("AcTitle")},
component: promptDetail
},
],
})
router.beforeEach((to,from,next)=>{//beforeEach是router的钩子函数,在进入路由前执行
if(to.meta.title){//判断是否有标题
document.title = to.meta.title
}
next() //执行进入路由,如果不写就不会进入目标页
})
export default router
Oh, buy it~ It’s possible locally, but not in the production environment.
Here’s the solution.
if (that.PromotionInfo.Title) {
// localStorage.setItem("AcTitle", that.PromotionInfo.Title)
console.log("页面设置",document.title);
document.title = that.PromotionInfo.Title;
console.log("页面设置之后",document.title);
}