vue实现动态改变title

Posted lguow

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现动态改变title相关的知识,希望对你有一定的参考价值。

想要实现vue动态改变页面title,需要给每个页面设置标题。并且在路由发生变化时修改页面title

router - index.js

const router = new Router({
    mode: ‘history‘,
    routes: [
        {
            path: ‘/index‘,
            name: ‘index‘,
            component: Index,
            meta:{
                // 页面标题title
                title: ‘首页‘
            }
        },
        {
            path: ‘/content‘,
            name: ‘content‘,
            component: Content,
            meta:{
                title: ‘内容‘
            }
        }
    ]
})
export default router

main.js

import router from ‘./router‘
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

 

以上是关于vue实现动态改变title的主要内容,如果未能解决你的问题,请参考以下文章

动态改变vue项目页面的title

vue路由跳转之当前页面路由跳转并动态改变页面的title

vue路由跳转之当前页面路由跳转并动态改变页面的title

ios如何动态改变title

Vue:单页面应用动态设置title

前端vue.js实现按钮的动态绑定