业务需求, 进入页面的时候, 网页有个默认标题, 加载的网页内容不同时, 标题需要变更. 例: 功能授权, 功能授权(张三).
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
- } elseif (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
- } elseif (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 自定义指令详解 主要介绍自定义指令的钩子函数, 以及指令传参等
来源: https://www.cnblogs.com/xyb0226/p/10991019.html