#### 前言:单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括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();
}
}
```
- vue
- axios封装全局loading(1)
- axios封装全局loading(2)
- axios封装全局loading(3)
- 学不动也要学,vue权限管理
- 判断前台当前页面是否需要token
- vue打包为APP(1)
- vue-cli3.0跨域
- vue-cli 3.0配置目录别名alias
- px自动转换rem
- 页面返回位置保留
- 浏览器title动态修改
- vue路由参数变化页面不刷新
- react
- 学不动也要学,react(1)
- Electron
- Electron厉害的要死(1)
- Electron厉害的要死(2)
- node
- 前后端分离
- MVC项目
- HTML
- 缓存时间机制
- 全站执行https请求
- 移动端meta
- CSS
- sticky_footer
- JS
- 子元素是否超出父元素
- iframe切换
- 获取url参数
- 回到顶部按钮
- 滚动条是否到达底部
- 移动端左右滑动div
- 移动pc相互跳转
- IE浏览器版本判断
- 调用摄像头和相册
- 抽奖概率
- cookie
- 平常小知识
- 单行文本与多行文本省略号
- display:table用法
- span标签document绑定事件失效
- 添加script标签
- 内联元素不能紧贴
- 3D旋转(transform)粗细渲染
- 全英文不换行问题
- 点击input出现蓝色边框
- wap端点击div,a,img出现阴影效果
- 华为手机使用flex布局,样式位移
- IE兼容性
- 图解
- 其他
- 未整理