vue单页面应用根据路由动态修改title

148 阅读 0 评论 98 点赞

我是靠谱客的博主怕孤独冬天，最近开发中收集的这篇文章主要介绍vue单页面应用根据路由动态修改title，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、通过全局前置守卫beforeEach

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: { title: '首页' }
        }
    ]
})
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title || '首页'
    }
    next()
})
复制代码

2、插件第一步安装：

npm install vue-wechat-title --save
复制代码

第二步引入插件：项目入口文件main.js引入并使用

import VuewechatTitle from 'vue-wechat-title'
Vus.use(VuewechatTitle)

router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title || '首页'
    }
    next()
})
复制代码

第三步设置使用title：在你需要改变的页面第一个div 上加上v-wechat-title="this.title", title 是下面再 data 里面定义的数据.

<template>
    <div v-wechat-title="this.title">
</template>
export default {
    data(){
        return {
            title: '首页'
        }
    }
}
复制代码

两种方法，看项目具体情况吧。希望点赞来！！！