vue 修改浏览器Title

2023-07-17 17:12| 来源: 网络整理| 查看: 265

VUE “Title”修改 1.静态“Title ”

vue 在public 文件夹中有一个index.html，直接修改title中的值即可。这是最low的方法。

当然你的项目如果是使用webpack或者是vue-cli创建出来的项目，那么你会在title的地方看到

或者

这两种写法。莫慌！！！！

第一种写法修改：

vue.config.js文件中的

chainWebpack: config =>{ config.plugin('html') .tap(args => { args[0].title = "标题"; return args; }) }

第二种写法修改：

vue.config.js文件中的

configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title. name: name, resolve: { alias: { '@': resolve('src') } } },

2.动态“Title” 方法一：

第一步：在main.js里面添加一个全局指令

Vue.directive('title', { inserted: function (el, binding) { document.title = el.dataset.title } })

第二步：在要调用的组件里面，随便找一个div加入如下代码

v-title data-title="我的"

案例：

注册登录合作平台方法二：

实现思路很简单：就是利用路由的导购守卫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(); })

路由守卫你可以放在别的地方。。

方法三：

vue-wechat-title 插件