vue项目抽离路由模块

抽离路由模块

1.在src目录下新建router.js文件

2.把main.js中的所有导入路由模块剪切进router.js

//导入Account.vue  Goodslist.vue组件
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. 把main.js中创建的router对象剪切进router.js

//3.创建路由对象
var routerobj = new VueRouter({
    routes:[
        {path:'/account',component:account,
            children:[
                // {path:'/',redirect:'register'},
                {path:'login',component:login},
                {path:'register',component:register},
            ]
        },
        {path:'/goodslist',component:goodslist},
    ]
})

4.导入vue-router

import VueRouter from 'vue-router'

5.把路由对象利用export default暴露出去

export default routerobj

6.在main.js导入抽离的路由模块

//导入抽离的路由模块
import routerobj from './router.js'

7.在vm实例中挂载路由对象

 router:routerobj,     //挂载路由对象