vue路由跳转动态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"><imgsrc="../../../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"><divclass="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"><imgsrc="../../../assets/images/mobile/indictor.png"alt=""class="wrapper-main1-indictor"/></div></div></div></div><van-paginationv-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标题信息相关推荐

vue路由跳转回退后页面不刷新处理
vue路由跳转回退后页面不刷新处理 ·利用keep-alive 缓存需要缓存的页面具体实现流程 1.在app.vue中改写router-view <keep-alive><rout ...
vue路由重定向和动态路由
vue路由重定向和动态路由文章目录 vue路由重定向和动态路由 vue路由重定向动态路由 vue路由重定向实现页面跳转一般有两种方式:重定向页面和转发页面. 重定向页面的具体实现方式就是更改页面 ...
vue路由跳转错误：Error: Redirected when going from “/login“ to “/home“ via a navigation guard.
# 问题描述: vue路由跳转错误:Error: Redirected when going from "/login" to "/home" via a na ...
Vue路由跳转与接收参数
Vue路由跳转与接收参数一.路由跳转四种方式 (带参数) 1) router-link 1.不带参数 <router-link :to="{name:'home'}"> ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
vue 路由跳转并打开新页面
let id ='123'; const {href} = this.$router.resolve( { path: '/home/test',query: {id: id}} ) window.o ...
vue路由跳转报错解决
vue路由跳转: setTimeout(function () { console.log(this); this.$router.push("/login"); },800) 语 ...
工作112:vue路由跳转错误：Error: Redirected when going from “/login“ to “/home“ via a navigation guard.
vue路由跳转错误:Error: Redirected when going from "/login" to "/home" via a navigation ...
vue路由跳转返回上一级
vue路由跳转,返回上一级 this.$router.go(-1)

vue路由跳转动态title标题信息

vue路由跳转动态title标题信息相关推荐

最新文章

热门文章