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

最新推荐文章于 2024-08-07 10:25:36 发布

weixin_33739541

最新推荐文章于 2024-08-07 10:25:36 发布

阅读量5.9k

点赞数 2

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5ceca0c8f265da1bb31c18d5

版权

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: '首页'
        }
    }
}
复制代码

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