Vue开发技巧

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

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

1
window.location.href = 'url'

vue-cli域名访问Invalid Host header

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

1
2
3
4
5
6
7
const devWebpackConfig = merge(baseWebpackConfig, {
...

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

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

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

$router跳转及传参

  • path+query
1
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
接收参数:{{ $route.query.msg }}

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

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

定时任务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
data () {
return {
myInterval: null
}
},
mounted () {
let _this = this
this.myInterval = window.setInterval(function () {
_this.myMethod()
}, 1000)
},
beforeDestroy () {
window.clearInterval(this.myInterval)
},
methods: {
myMethod () {
...
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :