vue项目中，设置动态title的方法

@vue项目中，设置动态title的方法

设置路由拦截器，然后再路由拦截器中设置动态的标题，需要在router.js中设置每一个页面对应标题，代码如下

1.通过 router.beforeEach 导航守卫来修改

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const report_zcfzb=() => import('../views/report/report_zcfzb.vue');
const report_lrb=() => import('../views/report/report_lrb.vue');
const routes = [
    {path: '*', redirect: '/'},//有不匹配的路由就重定向到首页
	{
	    path: '/report_zcfzb',
	   name: 'report_zcfzb',
	    meta:{
	        title: '资产负债表',
	    },
	    component: report_zcfzb
	},{
	    path: '/report_lrb',
	    name: 'report_lrb',
	    meta:{
	        title: '利润表',
	    },
	    component: report_lrb
	},
]
//在main.js中写路由拦截器
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title + ' | 鑫恩华财税后台管理系统'
    } else {
        document.title = '鑫恩华财税后台管理系统'
    }
    next()
});

2.自定义指令来修改

//1.在main.js 页面里添加自定义指令

Vue.directive('title', {//单个修改标题

 inserted: function (el, binding) {

 document.title = el.dataset.title

 }

})

//2.在需要修改的页面里添加v-title 指令

<div v-title data-title="我是新的标题"></div>.