如何修改Vue项目中的页面title

方法一:全局自定义指令修改

	// 设置修改页面标题的自定义指令
	Vue.directive('title',{
	  inserted: function(el){
	      document.title = el.getAttribute('title')
	      console.log(el)
	  }
	})

如何修改Vue项目中的页面title_第1张图片
如何修改Vue项目中的页面title_第2张图片

方法二:使用beforeEach去统一设置(在路由配置文件配置)

如何修改Vue项目中的页面title_第3张图片
如何修改Vue项目中的页面title_第4张图片

方法三:简单粗暴的方式(直接在当前页面的created生命周期里面进行编写)

在这里插入图片描述
注意:以上三种方法的优先级:自定义指令 > 页面生命周期 > 路由配置文件

你可能感兴趣的:(vue,vue.js,前端开发)