vue动态该变title_beforeenter修改title-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45266125/article/details/103456792

本文介绍如何在Vue项目中通过路由守卫动态设置每个页面的title，包括使用vue-wechat-title插件进行标题的动态更新，确保用户体验和SEO优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博客地址：http://www.globm.top/blog/1/detail/28
分类

页面title固定值
页面title动态获取，类似于博客文章标题

固定title

//rooter.js
{
	path: '/',
	name: 'xxx',
	component: () => import('./components/xxx.vue'),
	meta: {
		title: 'xxx'   //设置标题
	}
},

路由守卫中设置改变标题

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    from.name ? next({ name: from.name }) : next({ path: 'error' })
  } else {
  // 判断路由中是否存在title
    if (to.meta.title) {
      document.title = to.meta.title
    } else {
      document.title = 'xxx'
    }
    next()
  }
})

动态改变title

安装

npm install vue-wechat-title --save

引入main.js

import VueWechatTitle from 'vue-wechat-title'

Vue.use(VueWechatTitle)

配置路由守卫

router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    from.name ? next({ name: from.name }) : next({ path: 'error' })
  } else {
  // 判断路由中是否存在title
    if (to.meta.title) {
      document.title = to.meta.title
    } else {
      document.title = 'xxx'
    }
    next()
  }
})

页面使用

//页面开始标签加入指令
<template>
    <div v-wechat-title="title">
      //内容
	</div>
</template>

//配置title
<script>
export default {
  name: 'ArticleInfo',
  data () {
    return {
      title: '测试', 
       }
  },
  created () {
    this.title = '改变后的标题'
  },
}
</script>