iview
iView 是一套基于 Vue.js 的 UI 组件库,主要服务于 PC 界面的中后台产品。
iview环境配置
可以打开iview的官网:iview官网 查看指南,都比较详细
- 安装iview
$ npm install iview --save
- 引入iview
一般在 webpack 入口文件 main.js 中如下配置:
...
import iView form 'iview';
import 'ivieww/dist/styles/iview.css';
...
Vue.use(iView);
VUE刷新页面
vue刷新当前页面的方式
-
使用
window.locationn.href
window.location.replace()
window.location.reload()
刷新页面时会出空白,体验不是很难好 -
先进入一个空路由,然后返回
reflashPage(){
let NewPage = '_empty' + '?time' + new Date().getTime()/500;
this.$router.push(NewPage);
this.$router.go(-1);
}
刷新后点浏览器的前进按钮会出现空白页
- 使用provide/inject
简单地老说就是再父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。
app.vue
<template>
<div id="app">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide(){
return{
reload:this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload(){
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
})
}
}
}
</script>
需要跳转的页面: 前面会有这个inject
export default {
inject:['reload'],
data () {
return {
...
}
},
后面想刷新当前页面的地方这样写:
this.reload();