vue项目动态设置浏览器标题title两种方法

各位铁汁们，老步骤先效果图奉上

方法一、使用插件vue-wechat-title来设置浏览器动态标题

第一步：安装插件

 1. npm vue-wechat-title --save

第二步:在全局main.js引入、使用该插件

 1. import VueWechatTitle from 'vue-wechat-title' //可以动态修改浏览器标题的插件2. Vue.use(VueWechatTitle);

第三步：在router中的index.js路由下设置mate属性

const routes = [{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),meta:{title:'关于'}},{path: '/test',name: 'Test',component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),meta:{title:'测试'}},
]

第四步：我们在APP.vue使用vue-wechat-title插件

<router-view v-wechat-title="$route.meta.title"/>

你们看，第一种方法就搞定了，感觉还是挺简单的

方法二、通过路由导航守卫设置

这种方法比使用插件还要简单！
第一步：在router中的index.js路由下设置mate属性

const routes = [{path: '/about',name: 'About',component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),meta:{title:'关于'}},{path: '/test',name: 'Test',component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue'),meta:{title:'测试'}},
]

第二步：在路由守卫router.beforeEach中设置如下代码

router.beforeEach((to, form, next) => {if (to.meta.title) {document.title = to.meta.title} else {document.title = '默认标题' //此处写默认的title}next()
})

第三步：没有第三步！这样就完成啦！惊不惊喜意不意外！比较简单，推荐使用这个，不用下载插件，直接路由守卫设置即可

说明一下：这两种方法是我在做项目的时候刚好的需求，参考了几位大神的博主完成的，希望有问题的铁汁们多多留言交流，互相学习呀

vue项目动态设置浏览器标题title两种方法相关推荐

java校验码的设计_Java动态验证码单线设计的两种方法
1.java的动态验证码我这里将介绍两种方法: 一:根据java本身提供的一种验证码的写法,这种呢只限于大家了解就可以了,因为java自带的模式编写的在实际开发中是没有意义的,所以只供学习一下就可以了 ...
【VUE】vue实现登录滑动拼图验证的两种方法，纯前端组件验证以及前后端同时验证
vue实现登录滑动拼图验证的两种方法: 第一种是纯前端组件验证,只能区分是人为操作还是机器操作. 第二种是前后端同时验证,这种方法加上后端校验相对会更安全一些.(注:在最底部加上了同时兼容移动端的方法 ...
win10定时关机c语言,Win10系统怎么定时关机？Windows10设置定时关机的两种方法
最近,有位刚刚升级win10系统的用户反映自己在使用完电脑后经常会忘记手动关机,因此为了能够更好地保护电脑,希望在新系统中设置定时关机.这该如何操作呢?接下来,小编就向大家分享Windows10设置定 ...
计算机被填充背景花束纹理在那,为艺术字设置纹理填充的两种方法
Word2007系统中的纹理效果同样可以应用于艺术字的填充.文字表面添加纹理填充使文字看起来富于质感和立体感,word文档自带的已经有很多可供选择的漂亮纹理,用户在使用中根据其展示效果选择需要的纹理填 ...
w10怎么共享计算机文件共享,win10系统如何共享文件夹？windows10设置共享文件夹的两种方法...
最近,有一些刚刚安装win10正式版系统的用户反映自己因为工作需求想要在局域网内设置文件夹共享,却又不知道该如何操作.这该怎么办呢?接下来,小编就向大家介绍windows10正式版系统中快速设置共享文 ...
vue项目设置浏览器标题title及图标
一.固定设置标题方案方法一:在vue.config.js文件,添加如下代码: chainWebpack: config => {config.plugin('html').tap(args = ...
vue项目设置浏览器标题title
VUE2: 一.固定设置标题方案方法一,在vue.config.js文件添加如下代码: chainWebpack: config => {config.plugin('html').tap( ...
动态修改dom node的两种方法性能比较
Created by Jerry Wang, last modified on Sep 25, 2014 测试代码: <html> <script src="C:\User ...
DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1. ...

vue项目动态设置浏览器标题title两种方法

方法一、使用插件vue-wechat-title来设置浏览器动态标题

方法二、通过路由导航守卫设置

vue项目动态设置浏览器标题title两种方法相关推荐

最新文章

热门文章