How to dynamically modify page title in Vue

This article mainly introduces the method of dynamically modifying the page title based on Vue-based SPA. Friends who need it can refer to it

Recently made a SPA mobile web based on VUE and found that the page title can be dynamically modified through document.title=xxxx is really painful to modify, and it is said to have no effect on WeChat on IOS. Baidu found that it needs to do some additional operations for WeChat on IOS, that is: create a hidden Iframe, then load an image file at will, and then remove it after loading, so that the page title can be modified. There are several solutions on the Internet:

1. Set the title attribute in App.Vue, and then bind the page title. All sub-components can modify the title through this.$root.data.title=xxxxx;To modify

Disadvantages: App.Vue’s default el is just a p in the body. To do this, you need to bind the entire html

2 and implement it through custom instructions

Vue.directive('title', {
 inserted: function (el, binding) {
 document.title = el.innerText
 el.remove()
 }
})

Calling method: <p v-title>Title content</p>

Advantages: This has a greater degree of customization (let’s not discuss whether the IOS WeChat end can be modified successfully )

Disadvantages: It cannot meet the needs of modifying the page title in some JS methods. For example, the page is a websocket page. When receiving a message, it is necessary to dynamically display the page title. At this time, it is not necessary to frequently modify the p-bound text. Appropriate

For the above two methods found on the Internet, I merged them and used the vue plug-in to modify the SPA page title:

var plugin={};
plugin.install=function(Vue,options){
 Vue.prototype.$title=function(title){
  document.title=title;
  var iframe=document.createElement("iframe");
  iframe.style.display='none';
  iframe.setAttribute('src','/e.png');
  var loadedCallback=()=>{
   iframe.removeEventListener('load',loadedCallback);
   document.body.removeChild(iframe);
  };
  iframe.addEventListener('load',loadedCallback);
  document.body.appendChild(iframe);
 };
};
module.exports=plugin;

Calling method: this.$title ('xxxxxx'); Of course you can replace it with a bound variable, and then watch for real-time adjustment.

ps: Vue Spa changes the title when switching pages

In the Vue component development process, because it is a single-page development, but sometimes The title of the page needs to be changed according to the situation, so I checked online and found various explanations: wo (wo) li (kan) Hu (bu) whistle (dong), so I thought of a black technology documet.title="xxx";

Create a project at will. In an independent module, create document.title='title' after the hook function is started; but it is said that it is invalid under WeChat in IOS. Although it has been tested with an Apple machine, it works, but I thought of this It will affect my code obsessiveness.

<script>
export default {
  data(){
    return{
    }
  },
  created(){
    document.title="首页"
  },
}
</script>

So I found a useful thing vue-wechat-title on github

Introduced through npm install vue-wechat-title Installation

After the required vue-router and the components required by the page

const router = new VueRouter({
  mode: 'history',
  routes:[
    {
    name: 'index',
    path: '/',
    meta: {
        title: '首页'
     },
     component: index
    },
   {
     name: 'root',
     path: '/root', 
     meta: {
        title: '肉特'
    },
    component: root
    }  
 ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

Add a paragraph at the top of the component<p v-wechat-title="$route.meta.title"></p&gt ;

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ajax in wordpress

How to implement parent component to pass data to child component in vue

How to implement finger sliding carousel on mobile terminal in js

The above is the detailed content of How to dynamically modify page title in Vue. For more information, please follow other related articles on the PHP Chinese website!