本组件作用在页面加载完成前进行loader提示,提升用户体验,只需要在app.vue中引用一次,整个项目中路由切换时就可以自动进行提示(vuex版);
1. 添加vuex值和方法;
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoading: false
},
mutations: {
// 控制loading显示隐藏
updateLoadingStatus(state, payload) {
state.isLoading = payload.isLoading
}
},
getters: {},
actions: {}
})
19
19
1
import Vue from 'vue'
2
import Vuex from 'vuex'
3
4
Vue.use(Vuex)
5
6
export default new Vuex.Store({
7
state: {
8
isLoading: false
9
},
10
mutations: {
11
// 控制loading显示隐藏
12
updateLoadingStatus(state, payload) {
13
state.isLoading = payload.isLoading
14
}
15
},
16
getters: {},
17
actions: {}
18
})
19
2. 将vuex添加到vue实例中供全局调用
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
15
15
1
import Vue from 'vue'
2
import App from './App'
3
import router from './router'
4
import store from './store'
5
6
Vue.config.productionTip = false
7
8
/* eslint-disable no-new */
9
new Vue({
10
el: '#app',
11
router,
12
store,
13
components: { App },
14
template: '<App/>'
15
})
3. 修改vue-router,利用router事件钩子,操作控制loader组件的值
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
// 实例化路由
const router = new Router({
routes
})
// 路由跳转前的钩子
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
})
// 路由跳转后的钩子
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
export default router
32
32
1
import Vue from 'vue'
2
import Router from 'vue-router'
3
import store from '../store/index'
4
import HelloWorld from '@/components/HelloWorld'
5
6
Vue.use(Router)
7
8
const routes = [
9
{
10
path: '/',
11
name: 'HelloWorld',
12
component: HelloWorld
13
}
14
]
15
16
// 实例化路由
17
const router = new Router({
18
routes
19
})
20
21
// 路由跳转前的钩子
22
router.beforeEach(function (to, from, next) {
23
store.commit('updateLoadingStatus', {isLoading: true})
24
next()
25
})
26
27
// 路由跳转后的钩子
28
router.afterEach(function (to) {
29
store.commit('updateLoadingStatus', {isLoading: false})
30
})
31
32
export default router
4. 在app.js中使用loader组件,最需要注意的一点,控制组件显示的变量,需要通过v-model来与组件绑定(如下第六行)
<template>
<div id="app">
{{isLoading}}
<img src="./assets/logo.png">
<router-view/>
<loading v-model="isLoading"></loading>
</div>
</template>
<script>
import {mapState} from 'vuex'
import loading from './components/loading/loading.vue'
export default {
name: 'App',
components: {
loading
},
computed: {
...mapState({
isLoading: state => state.isLoading
})
}
}
</script>
25
1
<template>
2
<div id="app">
3
{{isLoading}}
4
<img src="./assets/logo.png">
5
<router-view/>
6
<loading v-model="isLoading"></loading>
7
</div>
8
</template>
9
10
<script>
11
import {mapState} from 'vuex'
12
import loading from './components/loading/loading.vue'
13
14
export default {
15
name: 'App',
16
components: {
17
loading
18
},
19
computed: {
20
mapState({
21
isLoading: state => state.isLoading
22
})
23
}
24
}
25
</script>