1. 效果展示
2. 代码
想要实现vue动态改变页面title,需要给每个页面设置标题。并且在路由发生变化时修改页面title
// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Report from '../views/report.vue'
import Query from '../views/query.vue'
import Detail from '../views/detail.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
redirect: '/report',
meta: {
title: '首页'
}
},
{
path: '/report',
name: 'Report',
component: Report,
meta: {
title: '投诉举报'
}
}
]
})
router.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
export default router