P7:vue下路由懒加载

介绍

package.json:

“vue”: “^2.4.2”,
“vuex”: “^2.4.1”,
“vue-router”: “^2.7.0”,
“vue-template-compiler”: “^2.4.2”,
“webpack”: “^2.6.1”,

router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import Vue from 'vue'
import Router from 'vue-router'
// import Recommend from 'src/pages/recommend/recommend'
const Recommend = (resolve) => {
    import('src/pages/recommend/recommend').then((module)=>{
        resolve(module)
    })
}
// import Singer from 'src/pages/singer/singer'
const Singer = (resolve) => {
    import('src/pages/singer/singer').then((module)=>{
        resolve(module)
    })
}
// import Rank from 'src/pages/rank/rank'
const Rank = (resolve) => {
    import('src/pages/rank/rank').then((module)=>{
        resolve(module)
    })
}
// import Search from 'src/pages/search/search'
const Search = (resolve) => {
    import('src/pages/search/search').then((module)=>{
        resolve(module)
    })
}
// import UserCenter from 'src/components/user-center/user-center'
const UserCenter = (resolve) => {
import('src/components/user-center/user-center').then((module)=>{
resolve(module)
})
}
// import SingerDetail from 'src/components/singer-detail/singer-detail'
const SingerDetail = (resolve) => {
    import('src/components/singer-detail/singer-detail').then((module)=>{
        resolve(module)
    })
}
// import SongsSheet from 'src/components/songs-sheet/songs-sheet'
const SongsSheet = (resolve) => {
    import('src/components/songs-sheet/songs-sheet').then((module)=>{
        resolve(module)
    })
}
// import RankList from 'src/components/rank-list/rank-list'
const RankList = (resolve) => {
    import('src/components/rank-list/rank-list').then((module)=>{
        resolve(module)
    })
}
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/',
            redirect: '/recommend'
        },
        {
            path: '/recommend',
            component: Recommend,
            children:[
                {
                    path:':id',
                    component:SongsSheet
                }
            ]
        },
        {
            path: '/singer',
            component: Singer,
            children:[
                {
                    path:':id',
                    component:SingerDetail
                }
            ]
        },
        {
            path: '/rank',
            component: Rank,
            children:[
                {
                    path:':id',
                    component:RankList
                }
            ]
        },
        {
            path: '/search',
            component: Search,
            children:[
                {
                    path:':id',
                    component:SingerDetail
                }
            ]
        },
        {
            path:'/user',
            component:UserCenter
        }
    ]
})

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import App from './App'
import router from './router'
import VueLazyload from 'vue-lazyload'
import fastclick from 'fastclick'
import store from './store'
fastclick.attach(document.body)
Vue.use(VueLazyload, {
    loading: require('src/common/images/loading.svg'),
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})
【VUE】, 常用技巧