vue如何设置每个页面的标题

vue是单页面应用,我们怎么给每个页面设置单独的标题呢?
1.首先在路由文件中添加meta属性,meta中设置title

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import home from "@/components/Home.vue"
import news from "@/components/News.vue"

export default new Router({
    routes:[
        {
            path:'/',
            name:'home',
            meta:{title:'首页'},
            component:home
        },
        {
            path:'/news',
            name:'news',
            meta:{title:'新闻页'},
            component:news
        },
        {
            path:'*',
            redirect:'/'
        }
    ]
})

2.然后在main.js中,遍历路由,给每个页面设置标题
在main.js中添加这段代码就可以

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


这样就可以实现每个页面单独设置标题了。

志博

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: