🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
#### 前言:单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title。 # :-: **初解** > 使用vue的情况下,title 只能通过监听router改变进行改变,可惜在iOS微信浏览器无效。 > 因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件。 # :-: **正文** > 打开文件,启动cmd,安装 ``` npm install vue-wechat-title --save ``` > 在main.js中引入,并且使用 ``` import VueWechatTitle from "vue-wechat-title"; Vue.use(VueWechatTitle); ``` > 在router.js中设置固定title ``` const ce = resolve => require(["@/views/ce"], resolve);//为vue-router懒加载 {path: '/ce',name: ce',meta: {title:'测试'},component: ce} ``` 在app.vue里面直接使用 ``` <router-view v-wechat-title="$route.meta.title" /> ``` # :-: **功能加强** > 在动态获取title的页面title不会变化 :-: ![](https://box.kancloud.cn/e7e3aa234f6b304ae1a979a7f2c8c07b_375x667.png) ***** :-: ![](https://box.kancloud.cn/e97d743547ea270e5b521460df9858be_371x667.png) > 所以我们需要在进入页面之前修改meta里面的title > router带上titlename参数,跳转页面进行判断 ``` //原页面 <router-link :to="{name:'ceshi',query:{titlename:'612星球的店铺1'}}"></router-link> ``` ``` //跳转页面 export default { name: "ceshi", beforeRouteEnter(to,from,next){ if(to.query.titlename){ to.meta.title=to.query.titlename }else{ to.meta.title='分类详情' } next(); } } ```