Vue开发技巧

Vue项目中跳转到外部链接方法

Vue页面中的内部跳转，可以用 this.$router.push() 实现，但是如果我们还用这种方法跳转外部链接，就会报错，一看链接的路径，原来是在外部链接前面加上了 http://localhost:8080/#/ 这一串导致跳转出现问题，那么我们如何跳转到外部链接呢，只需使用JavaScript原生跳转方式实现即可：

window.location.href = 'url'

vue-cli域名访问Invalid Host header

在webpack.dev.conf.js中添加：disableHostCheck: true

const devWebpackConfig = merge(baseWebpackConfig, {
  ...

  // these devServer options should be customized in /config/index.js
  devServer: {
    disableHostCheck: true,
    ...

全局缓存与浏览器窗口缓存

var openId = global.localStorage.getItem('open_id')
global.localStorage.setItem('open_id', openId)

var openId = window.localStorage.getItem('open_id')
window.localStorage.setItem('open_id', openId)

$router跳转及传参

• path+query

this.$router.push({path: '/wx_error', query: {msg: 'open_id error'}}) // $route.query.msg

跳转URL：http://192.168.1.88:8080/wx_error?msg=open_id error
接收参数：{% raw %}{{ $route.query.msg }}{% endraw %}

• name+params

this.$router.push({name: 'wx_error', params: {msg: 'open_id error'}}) // $route.params.msg

跳转URL：http://192.168.1.88:8080/wx_error
接收参数：{% raw %}{{ $route.params.msg }}{% endraw %}

定时任务

data () {
  return {
    myInterval: null
  }
},
mounted () {
  let _this = this
  this.myInterval = window.setInterval(function () {
    _this.myMethod()
  }, 1000)
},
beforeDestroy () {
  window.clearInterval(this.myInterval)
},
methods: {
  myMethod () {
    ...
  }
}