@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>.