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的修仙资料。嘿嘿嘿你懂得。/手动狗头

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

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

巴特西

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

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

最新文章

热门文章