码迷,mamicode.com
首页 > 其他好文 > 详细

vue实现动态改变title

时间:2020-07-16 12:22:20      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:main   tle   并且   路由   new   改变   doc   imp   ons   

想要实现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

标签:main   tle   并且   路由   new   改变   doc   imp   ons   

原文地址:https://www.cnblogs.com/lguow/p/13321623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!