Vue项目动态设置浏览器title

需求

1.浏览器title根据选择的菜单名动态设置。

分析

浏览器的title，可以采用document.title赋值改变，所以改变单个页面可以在页面的钩子函数中使用document.title赋值直接改变！如果要改变所有的页面title明显以上方法不可行！综上可得出浏览器的title是采用document.title在赋值的，所以要想实现浏览器的title更具菜单名改变，就需要获取到菜单名赋值document.title即可，改变所有页面则不能挨个写到页面文件中！需要写到main.js中！菜单名就是在设置页面路由时的meta：{title：’我是菜单名‘}的值 ，要获取到路由相关参数，则需要考虑到路由导航守卫
before Each（to,from,next）{}每次路由跳转都会进入这个钩子，可以在这个钩子进行跳转前的拦截判断
参数说明：

• to: 就是从哪个路由来
• from 到哪里去
• next（） 放行

实现：

使用 router. before Each 在main.js中获取到路由的title值在通过document.title赋值改变浏览器的title


说明：我项目中的路由的title采用的il8n统一管理，所以to.meta,title获取到的是il8n中的菜单名的对象取值字符串.则需要把il8n引入到main中在通过split方法把to.meta,title的值分割为数组，在通过对象取值把路的中文名匹配出来,如果你的路由名直接是汉字那就直接赋值不需要其他逻辑处理。