vue实现路由跳转动态title标题信息
作者：十贰_
这篇文章主要介绍了vue实现路由跳转动态title标题信息，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
路由跳转动态title标题信息
想要让浏览器的标题，随着vue的路由跳转的改变而改变，就要配置router/index.js文件里的信息。在meta对象里面配置一个title。
{
path: "/",
name: "Home",
meta: {
title: "首页"//这是重点
},
component: () => import( /* webpackChunkName: "about" */ "../views/home/index.vue"),
}然后在路由跳转之前判断跳转之后的页面是否配置的有title值。如果有则替换title，如果没有则保持title不变即可。
router.beforeEach((to, from, next) => {
if (to.meta.title) { //如果设置标题，拦截后设置标题
document.title = to.meta.title
}
})配置成功之后，vue在进行路由跳转的时候，页面的title也会跟着路由配置的信息进行跳转。
--------2022-06-14补充--------
第二种方式：使用v-title
<div class="wrapper" v-title :data-title="webTitle">
<!-- <div class="wrapper-main-Img">
<img
src="../../../assets/images/mobile/hdkb.png"
alt=""
class="wrapper-main1-wqjm"
/>
</div> -->
<p class="hy-title">{{ columnName || "--" }}</p>
<div class="warpper-news-list">
<van-empty description="暂无数据" v-if="actLen == 0" />
<div class="actLenWrap" v-if="actLen == 1">
<div
class="warpper-news-item"
v-for="(i, v) in activetyList"
:key="v"
@click="toActDetails(i.id,i.title)"
>
<div class="warpper-news-l">
<p class="warpper-news-title">{{ i.title }}</p>
<p class="warpper-news-details">
{{ i.description || '--' }}
</p>
<p class="warpper-news-time">{{ i.releaseTime.substring(0,10) || '--' }}</p>
</div>
<div class="warpper-news-r">
<img
src="../../../assets/images/mobile/indictor.png"
alt=""
class="wrapper-main1-indictor"
/>
</div>
</div>
</div>
</div>
<van-pagination
v-model="params.current"
:page-count="Math.ceil(total / size)"
mode="simple"
@change="handleSize"
v-if="actLen == 1"
class="pageNation"
/>
</div>created() {
this.columnName = this.$route.query.name;
this.webTitle = this.columnName +'-test';
this.params.columnId = this.$route.query.id;
// this.getActList();
this.contentPage();
},vue动态改变title
需求
1.不同路由路径下，动态更改title
2.相同路径下，像产品详情页，需要根据产品名字不同动态更改title
解决需求一
1.在router.js根据不同的路由配置所属title
{
path: '/startCertificate',
name: 'startCertificate',
component: startCertificate,
meta:{
title:'这是动态路由哦'
}
},2.在main.js中配置
情况一：普通h5开发
router.beforeEach((to,from,next) =>{
// 路由发生变化修改页面title
if (to.meta.title) {
document.title = to.meta.title;
}
}情况二：在app内嵌h5的混合应用中，iOS系统下部分APP的webview中的标题不能通过 document.title = xxx 的方式修改，因为在IOS webview中网页标题只加载一次，动态改变是无效的，解决代码如下
router.afterEach(route => {
// 从路由的元信息中获取 title 属性
if (route.meta.title) {
document.title = route.meta.title;
// 如果是 iOS 设备，则使用如下 hack 的写法实现页面标题的更新
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
const hackIframe = document.createElement('iframe');
hackIframe.style.display = 'none';
hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
document.body.appendChild(hackIframe);
setTimeout(_ => {
document.body.removeChild(hackIframe)
}, 300)
}
}
});解决需求二
1.安装依赖：npm i vue-wechat-title
2.在main.js中配置：
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
3.在需要改变title的vue文件中：
<template> <div class="customerCaseDetail" v-wechat-title="changeTitle"> </div> </template>
<script>
export default {
data() {
return {
changeTitle:''
}
},
created() {
this.changeTitle = '动态title'
},
}
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。