vue動態設置頁面title方法

第一種方法

npm install vue-wechat-title --save

• 在mian.js中引入

//設置title

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

• 在router的index.js的路由中加上參數

 {
     path: '/login',
     component: Login,
     meta: {
        title: '登錄'
     }
 }

 

• 如果是公共組件，在跳轉時根據條件來動態設置title，可以在最外層的div上設置v-wechat-title="$route.meta.title"再動態去改變title即可

<template>
    <div class="hours-con container" v-wechat title="$route.meta.title">
          .....
    </div>
</template>

 第二種方法

 

//在main.js中設置title

router.beforeEach((to, from, next) => {
    /* 路由發生變化修改頁面title */
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
})