业务需求,进入页面的时候,网页有个默认标题,加载的网页内容不同时,标题需要变更. 例:功能授权,功能授权(张三).
Vue下有很多的方式去修改网页标题,这里总结下解决此问题的几种方案:
一、最笨方案
结合业务直接在Vue生命周期函数 created 和 mounted 中,给 document.title赋值。
- <script>
- import axios from 'axios'
- export default {
- created () {
- document.title = '功能授权'
- },
- mounted() {
- axios.get('***').then((d)=>{
- document.title = '功能授权('+ d.Name + ')'
- })
- }
- }
- </script>
二、普通方案,使用Vue-Router的beforeEach拦截
项目中使用了Vue Router,在路由文件 index.js 中给需要的路由添加 title。
- routes: [{
- path: '/',
- name: 'home',
- component: () => import('@/pages/home/index'),
- meta:{
- keepAlive: true
- }
- },
- {
- path: '/person/auth,
- name: 'personAuth',
- component: () => import('@/pages/person/auth),
- meta:{
- title: '功能授权',
- keepAlive: false
- }
- }
- ]
在路由的beforeEach 拦截器里处理
- router.beforeEach((to, from, next) => {
- /* 路由发生变化修改页面title */
- if (to.meta.title) {
- document.title = to.meta.title
- }
- })
如果想在页面上依据加载的内容不同再变更title时,请参考方式一的 mounted函数处理逻辑.
三、优雅方案,使用Vue 自定义指令(directive)
如前文所提,页面获取不同数据状态时,需要展示不同的标题。那么我们可以结合vue 自定义指令(directive)可更优雅的处理网页标题的动态更新。
自定义指令 v-web-title的定义
- export default {
- inserted: function (el, binding) {
- const { value } = binding
- if (el.dataset.title) { // 方式1,可以给标签的data-title的属性赋值
- document.title = el.dataset.title
- } else if (value && value.title) { // 方式2,指令传参
- document.title = value.title
- }
- },
- update (el, binding, vnode, oldVnode) {
- const { value } = binding
- if (el.dataset.title) {
- document.title = el.dataset.title
- } else if (value && value.title) {
- document.title = value.title
- }
- }
- }
在页面上使用v-web-title有两种方式
1.给标签 data-title属性赋值
- <template>
- <div v-web-title
- :data-title="textTitle">
- </template>
- <script>
- import axios from 'axios'
- export default {
- data(){
- return {
- textTitle:'功能授权'
- }
- },
- mounted () {
- axios.get('***').then((d) => {
- this.textTitle = '功能授权(' + d.Name + ')'
- })
- }
- }
- </script>
2.给指令传参
- <template>
- <div v-web-title="{title:textTitle}">
- </template>
- <script>
- import axios from 'axios'
- export default {
- data(){
- return {
- textTitle:'功能授权'
- }
- },
- mounted () {
- axios.get('***').then((d) => {
- this.textTitle = '功能授权(' + d.Name + ')'
- })
- }
- }
- </script>
四、参考
1. vue单页面应用中动态修改title 主要介绍使用vue-weachat-title 组件
2.vue.js自定义指令详解 主要介绍自定义指令的钩子函数,以及指令传参等