node+vue+webpack 集成 四

1：路由抽取

1. router.js

2. import VueRouter from 'vue-router'
   
   // 导入 Account 组件
   import account from './main/Account.vue'
   import goodslist from './main/GoodsList.vue'
   
   // 导入Account的两个子组件
   import login from './subcom/login.vue'
   import register from './subcom/register.vue'
   
   // 3. 创建路由对象
   var router = new VueRouter({
     routes: [
       // account  goodslist
       {
         path: '/account',
         component: account,
         children: [
           { path: 'login', component: login },
           { path: 'register', component: register }
         ]
       },
       { path: '/goodslist', component: goodslist }
     ]
   })
   
   // 把路由对象暴露出去
   export default router

    

3. main.js

4. import Vue from 'vue'
   // 1. 导入 vue-router 包
   import VueRouter from 'vue-router'
   // 2. 手动安装 VueRouter 
   Vue.use(VueRouter)
   
   // 导入 app 组件
   import app from './App.vue'
   
   // 导入 自定义路由模块
   import router from './router.js'
   
   var vm = new Vue({
     el: '#app',
     render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
     router // 4. 将路由对象挂载到 vm 上
   })
   
   // 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；
   // Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的  中去；

    

5. Account.vue

6.