vue 动态设置页面title

在这里我们介绍3种方法

1.通过自定义指令去修改（单个修改比较好）

1.在main.js 页面里添加自定义指令//Vue.directive('title', {//单个修改标题inserted: function (el, binding) {document.title = el.dataset.title}})2.在需要修改的页面里添加v-title 指令<div v-title data-title="我是新的标题"></div>.复制代码

2.使用插件vue-wechat-title

1.安装插件npm vue-wechat-title --save2.在main.js里面引入插件import VueWechatTitle from 'vue-wechat-title'//动态修改titleVue.use(VueWechatTitle)3.在路由里面 添加titleroutes: [{path: '/login',component: Login,meta: {title: '登录'}}, {path: '/home',component: Home,meta: {title: '首页'}},]4.在app.vue 中添加 指令 v-wechat-title<router-view v-wechat-title='$route.meta.title' />复制代码

3.通过router.beforeEach导航守卫来修改

1.在router的index里写自己的路径和titleconst router = new Router({routes: [{path: '/login',component: Login,meta: {title: '登录'}}, {path: '/home',component: Home,meta: {title: '首页'}},]})2.使用router.beforeEach对路由进行遍历，设置titlerouter.beforeEach((to, from, next) => {//beforeEach是router的钩子函数，在进入路由前执行if (to.meta.title) {//判断是否有标题console.log(to.meta.title)document.title = to.meta.title}next()})复制代码

如果觉得《vue 动态设置页面title》对你有帮助，请点赞、收藏，并留下你的观点哦！