一、第一種寫法：
1.在src/下建立router.config.js：
1 export default[2 {3 path: '/home',4 component: (resolve) => require(['./components/home/Home.vue'], resolve),5 children: [6 {7 path: 'revisepassword/:username',8 component: (resolve) => require(['./components/revisepassword/Revisepassword.vue'], resolve)9 },10 {11 path: 'userfeedback/:username',12 component: (resolve) => require(['./components/userfeedback/Userfeedback.vue'], resolve)13 },14 {15 path: 'aboutus',16 component: (resolve) => require(['./components/aboutus/Aboutus.vue'], resolve)17 }18 ]19 },20 {21 path: '/rainie',22 component: (resolve) => require(['./components/rainie/Rainie.vue'], resolve)23 },24 {25 path: '/radar',26 component: (resolve) => require(['./components/radar/Radar.vue'], resolve)27 },28 {29 path: '/weatherforecast',30 component: (resolve) => require(['./components/weatherforecast/Weatherforecast.vue'], resolve)31 },32 {33 path: '/login',34 component: (resolve) => require(['./components/login/Login.vue'], resolve)35 },36 {37 path: '/register',38 component: (resolve) => require(['./components/register/Register.vue'], resolve)39 },40 {41 path: '/',42 redirect: '/login'
43 },44 {45 path: '*',46 redirect: '/login'
47 }48 ]
2.在main.js中：
1 import Vue from 'vue'
2 import App from './App.vue'
3 import VueRouter from 'vue-router'
4 import routerConfig from './router.config.js'
5
6 const router = newVueRouter({7 //讓滾動條滾回原來的位置
8 scrollBehavior: () => ({ y: 0}),9 //去除vue路由分隔的#号
10 //mode: 'history',
11 routes: routerConfig12 })13
14 newVue({15 el: '#app',16 router,17 render: h =>h(App)18 })
二、第二種寫法更改進階一些(推薦)
1.在src/下建立router檔案夾，在router檔案夾下建立index.js,在index.js中：
1 import Vue from 'vue'
2 import Router from 'vue-router'
3
4 Vue.use(Router)5
6 const Home = (resolve) =>{7 import('../components/home/Home').then((module) =>{8 resolve(module)9 })10 }11
12 const Revisepassword = (resolve) =>{13 import('../components/revisepassword/Revisepassword').then((module) =>{14 resolve(module)15 })16 }17
18 const Userfeedback = (resolve) =>{19 import('../components/userfeedback/Userfeedback').then((module) =>{20 resolve(module)21 })22 }23
24 const Aboutus = (resolve) =>{25 import('../components/aboutus/Aboutus').then((module) =>{26 resolve(module)27 })28 }29
30 const Rainie = (resolve) =>{31 import('../components/rainie/Rainie').then((module) =>{32 resolve(module)33 })34 }35
36 const Radar = (resolve) =>{37 import('../components/radar/Radar').then((module) =>{38 resolve(module)39 })40 }41
42 const Weatherforecast = (resolve) =>{43 import('../components/weatherforecast/Weatherforecast').then((module) =>{44 resolve(module)45 })46 }47
48 const Login = (resolve) =>{49 import('../components/login/Login').then((module) =>{50 resolve(module)51 })52 }53
54 const Register = (resolve) =>{55 import('../components/register/Register').then((module) =>{56 resolve(module)57 })58 }59
60 //配置路由
61 export default newRouter({62 routes: [63 {64 //配置預設的路由(根路由)
65 path: '/',66 redirect: '/login'
67 },68 {69 path: '/home',70 component: Home,71 children: [72 {73 path: 'revisepassword/:username',74 component: Revisepassword75 },76 {77 path: 'userfeedback/:username',78 component: Userfeedback79 },80 {81 path: 'aboutus',82 component: Aboutus83 }84 ]85 },86 {87 path: '/rainie',88 component: Rainie89 },90 {91 path: '/radar',92 component: Radar93 },94 {95 path: '/weatherforecast',96 component: Weatherforecast97 },98 {99 path: '/login',100 component: Login101 },102 {103 path: '/register',104 component: Register105 }106 ]107 })
2.在main.js中：
1 import Vue from 'vue'
2 import App from './App.vue'
3
4 import router from './router'
5
6 newVue({7 el: '#app',8 router,9 render: h =>h(App)10 })
3.注意别忘了安裝插件
第二種：使用webpck的import()來做代碼分割——import('./nice-scroll').then(init => init(dom))
webpack dynamic import出錯: SyntaxError: ‘import’ and ‘export’ may only appear at the top level
解決辦法： cnpm install --save-dev babel-plugin-syntax-dynamic-import
然後調整babel-loader配置如下：
1 use: {2 loader: 'babel-loader',3 options: {4
5 "plugins": [6 "syntax-dynamic-import"
7 ]8 }9 }
三、預設情況下，加載的路由js是按照0.js 1.js 2.js....命名的，想要修改js的名字
在webpack.config.js中的output:{}中添加
chunkFilename: '[chunkhash].chunk.js'