本組件作用在頁面加載完成前進行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>