Business requirements. When entering the page, the web page has a default title. The loaded web page content is different, and the title needs to be changed. Example: Function authorization, Function authorization (Zhang San).
There are many ways to modify the web page title under Vue. Here are a few solutions to solve this problem:
1. The stupidest solution
Combining business directly in the Vue lifecycle functions created and mounted, assigning values to it.
<script>
import axios from 'axios'
export default {
created () {
= 'Function Authorization'
},
mounted() {
('***').then((d)=>{
= 'Functional Authorization('+ + ')'
})
}
}
</script>
2. Ordinary solution, use Vue-Router's beforeEach intercept
Vue Router is used in the project, and title is added to the required routes in the routing file.
routes: [{
path: '/',
name: 'home',
component: () => import('@/pages/home/index'),
meta:{
keepAlive: true
}
},
{
path: '/person/auth,
name: 'personAuth',
component: () => import('@/pages/person/auth),
meta:{
title: 'Function Authorization',
keepAlive: false
}
}
]
Processing in the beforeEach interceptor of the route
((to, from, next) => {
/* Change the route page title */
if () {
=
}
})
If you want to change the title on the page according to the loaded content, please refer to the mounted function processing logic in Method 1.
3. Elegant solution, use Vue custom commands (directive)
As mentioned above, when the page obtains different data status, different titles need to be displayed. Then we can combine vue custom directives to handle dynamic updates of web page titles more elegantly.
Definition of custom directive v-web-title
export default {
inserted: function (el, binding) {
const { value } = binding
if () { // Method 1, you can assign values to the attribute of the data-title of the tag =
} else if (value && ) { // Method 2, command to pass parameters =
}
},
update (el, binding, vnode, oldVnode) {
const { value } = binding
if () {
=
} else if (value && ) {
=
}
}
}
There are two ways to use v-web-title on the page
1. Assign value to the tag data-title attribute
<template>
<div v-web-title
:data-title="textTitle">
</template>
<script>
import axios from 'axios'
export default {
data(){
return {
textTitle:'Function Authorization'
}
},
mounted () {
('***').then((d) => {
= 'Functional Authorization(' + + ')'
})
}
}
</script>
2. Pass parameters to the instructions
<template>
<div v-web-title="{title:textTitle}">
</template>
<script>
import axios from 'axios'
export default {
data(){
return {
textTitle:'Function Authorization'
}
},
mounted () {
('***').then((d) => {
= 'Functional Authorization(' + + ')'
})
}
}
</script>
4. Reference
1. Dynamically modify title in vue single page applicationMainly introduces the use of vue-weachat-title component
2.Detailed explanation of custom commandsIt mainly introduces the hook function of custom instructions, as well as directive argument transmission, etc.
Summarize
The above is the method of dynamically modifying web page titles that the editor introduced to you and encountered problems. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!