Vue项目中设置每个单页面的标题

两种实现方法，第一种方法引入插件，第二种为编程方式实现(推荐)

首先在路由文件index.js中给每个单页面路由添加title

routes: [{
    path: '/',
    name: 'index',
    component: index,
    meta:{
        title:'首页标题'
    }
    },{
    path:'/detail',
    name:'detail',
    component:detail,
    meta:{
        title:'详情页标题'
    }
}]

第一种方法：引入vue-wechat-title插件

1.下载安装插件依赖

npm install vue-wechat-title --save-dev

2.在入口文件main.js中引入并使用

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3.在app.vue中修改<router-view>标签

<router-view v-wechat-title='$route.meta.title'></router-view>

第二种方法：编程方式实现

直接在入口文件main.js中添加如下代码即可

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

完啦，噜啦啦.......

这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头


那么问题来了，如果你也想入坑前端或者学习更多技术，广交天下朋友(基友)，认识更多有趣的灵魂的话，欢迎加入前端交流群鸭~

扫二维码加为好友就完事了！安排~