vue小技巧

Vue - style绑定background

<div :style="{background: 'url(' + item.home_img + ') center center', backgroundSize: '100%'}">

注意

属性中存在'-'需要修改，如background-size需要修改成backgroundSize或者‘background-size’

属性的值如果不是变量，需要加引号，如'100%'

vue刷新当前页面，重载页面数据，常用于页面中英文切换

https://www.jianshu.com/p/dd90ceb68903

vue中href 拼接写法

:href="'#'+[index+1]"

vue之router路由最优美写法，懒加载、打包代码分离。https://www.jianshu.com/p/ba7e2f436c16

vue中查找当前设备类型


      let flag = navigator.userAgent.match(

        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i

      );

      return flag;

    },

vue中$nextTick用法

原理是在dom更新后立即执行内部操作详细[https://www.jianshu.com/p/7f9495b1c8ab]

1.在Vue生命周期的created()钩子函数进行DOM操作一定要放到Vue.nextTick()的回调函数中。

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

可以用来强制vue组件刷新

更改  this.isRouterAlive 来刷新组件生命周期
provide（）方法可以跨组件调用reload刷新方法

<div id="app" v-if="isRouterAlive">
    <router-view />
</div>
 data() {
    return {
      isRouterAlive: true,
    };
  },
  provide() {
    return {
      reload: this.reload,
    };
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
}
//在需要调用的组件注册一下
export default {
        name: "HomeHeader",
        inject: ['reload'],
methds:{
button(){
        this.reload()
            }
        }

    }

也可用于获取dom更新后的html数据来动态调整

 imgLoad() {
      this.$nextTick(function() {
        // 获取窗口宽度*图片的比例，定义页面初始的轮播图高度
        this.imgHeight = (document.body.clientWidth * 1) / 3;
        this.imgHeightTel = document.body.clientWidth * 1.5;
      });
    },

现在说说afterEach beforeEach这两个导航守卫的区别，一个前置钩子，一个后置钩子

afterEach可以利用import { Loading } from 'element-ui'
给路由加loading缓动加载效果

详细https://www.cnblogs.com/wuvkcyan/p/9311155.html

vue项目页面语言切换方法

先在localStorage中存下信息，避开页面刷新，vuex数据丢失的问题
然后配合vue中$nextTick用法，点击按钮后刷新根路由

//中英文切换
export function language() {
    let list = localStorage.getItem('language')
    //console.log(list)
    if (list == 'ch') {
        localStorage.language = 'en'
    } else {
        localStorage.language = 'ch'
    }
}
###根据localStorage的值返回true或false
qiehuan() {
      //语言切换
      let lolngnub = localStorage.getItem("lang");
      if (lolngnub == "ch") {
        return false;
      } else {
        return true;
      }
    },

然后再页面中引入上面两种方法，再页面中利用三元运算符，切换语言
<div >{{qiehuan()?'Member Center':'会员中心'}}</div>
<div> {{qiehuan()?'会员中心':'MEMBRERSHIP'}}</div>

使用插件完成多语言切换https://www.jianshu.com/p/df2550c6f1be