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

Posted 2021-06-09 是小橙鸭丶

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

方法一、使用插件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()
})

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

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