vue如何修改浏览器的标题title
方法一
第一步:在main.js里面添加一个全局指令
Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } })
第二步:在要调用的组件里面,随便找一个div加入如下代码
v-title data-title="我的"
案例:
<template> <header class="header_home user_reg" v-title data-title=""> <div class="top_box hidden-xs"> <div class="container"> <router-link to="/" class="logo"> <img src="../../../assets/image/5b10f166c3332.png" alt="" /> </router-link> <ul class="navs"> <li> <router-link to="/regist">注册</router-link> </li> <li> <router-link to="/login">登录</router-link> </li> <li> <router-link to="/CooperUser">合作平台</router-link> </li> </ul> </div> </div> </header> </template>
方法二
实现思路很简单:就是利用路由的导购守卫beforeEach在每次页面跳转前更改对应的title
第一步:首先在route里面给每个路由加上meta属性
{ path: '/login', name: 'login', component(resolve) { require(['./views/login.vue'], resolve) }, meta: { title: '登录页', keepAlive: true, // 需要被缓存 } }, { path: '/regist', name: 'regist', component(resolve) { require(['./views/regist.vue'], resolve) }, meta: { title: '注册页', keepAlive: true, // 需要被缓存 } }, { path: '/newList', name: 'newlist', component(resolve) { require(['./views/newsList.vue'], resolve) }, meta: { title: '新闻列表', keepAlive: true, // 需要被缓存 } }
第二步:在main.js里面加上导航守卫
router.beforeEach((to, from, next) => { window.document.title = to.meta.title == undefined?'默认标题':to.meta.title if (to.meta.requireAuth) { let token = Cookies.get('access_token'); let anonymous = Cookies.get('user_name'); if (token) { next({ path: '/login', query: { redirect: to.fullPath } }) } } next(); })
方法三
1.先安装插件,命令行执行cnpm install vue-wechat-title --save
即可安装。
2.引用插件,在main.js
中,首先import然后再use即可,
具体代码如下:
import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)
3.在路由的配置文件router.js
里面配置我们想要的页面标题,
代码示例如下:
routes: [{ path: '/', name: 'index', component: Index, meta: { title: "漫岛-一个有趣的网站" } }, { path: '/recruit', name: 'recruit', component: Recruit, meta: { title: "漫岛-团队伙伴招募" } } ]
4.最后一步,在app.vue
里面添加指令v-wechat-title
即可,示例是从官方npm页面copy的,请注意注释部分不要破坏使用规则。
具体如下:
<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 --> <div v-wechat-title="$route.meta.title"></div> <!--或者--> <router-view v-wechat-title="$route.meta.title"></router-view>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue-admin-template模板添加tagsview的实现
本文主要介绍了vue-admin-template模板添加tagsview的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-04-04vue使用this.$message不生效的部分原因及解决方案
这篇文章主要介绍了vue使用this.$message不生效的部分原因及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09详解Vue3中shallowRef和shallowReactive的使用
这篇文章主要为大家介绍了Vue3中shallowRef和shallowReactive函数的使用方法,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,需要的可以参考一下2022-07-07
最新评论