1.通过自定义指令去修改(单个修改比较好)
1 2 3 4 5 6 7 8 | //1.在main.js 页面里添加自定义指令 Vue.directive( 'title' , { //单个修改标题 inserted: function (el, binding) { document.title = el.dataset.title } }) //2.在需要修改的页面里添加v-title 指令 <div v-title data-title= "我是新的标题" ></div>. |
2.使用插件 vue-wechat-title
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //1.安装插件 npm vue-wechat-title --save //2.在main.js里面引入插件 import VueWechatTitle from 'vue-wechat-title' //动态修改title Vue.use(VueWechatTitle) //3.在路由里面 添加title routes: [{ path: '/login' , component: Login, meta: { title: '登录' } }, { path: '/home' , component: Home, meta: { title: '首页' } },] //4.在app.vue 中添加 指令 v-wechat-title <router-view v-wechat-title= '$route.meta.title' /> |
3.通过 router.beforeEach 导航守卫来修改
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | //1.在router的index里写自己的路径和title const router = new Router({ routes: [ { path: '/login' , component: Login, meta: { title: '登录' , }, }, { path: '/home' , component: Home, meta: { title: '首页' , }, }, ], }) //2.使用router.beforeEach对路由进行遍历,设置title router.beforeEach((to, from, next) => { //beforeEach是router的钩子函数,在进入路由前执行 if (to.meta.title) { //判断是否有标题 console.log(to.meta.title) document.title = to.meta.title } else { document.title = '默认title' } next() }) |
4.使用 vue-mate 修改 title
https://github.com/declandewet/vue-meta 文档中比较详细地说明了在浏览器端和服务器端如何使用 vue-meta 修改页面头部信息