Vue project H5 dynamically sets browser title

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);
						}

Guess you like

Origin blog.csdn.net/qq_46376192/article/details/133177744