vue路由模块化

vue的路由机制类似于jsp中引用其他页面,不过相对于jsp更加轻便.
在脚手架开发时,项目中往往需要设置很多路由,进行页面跳转或者传递参数. 如果所有路由全部在index.js中声明, 对后期的可读性和维护都有很大的影响.
将路由进行模块化, 对开发和调试都有很大帮助.

首先,编写各模块路由.将多个路由封装成模块, 使用数组保存起来.

//header.js
import header from '@/components/header'
export default [{
    name: 'header',
    path: '/header',
    meta: {
        title: '个人中心'
    },
    component: header
}]

//home.js
import home from '@/components/home'
export default [{
    name: 'home',
    path: '/home',
    meta: {
        title: '个人中心'
    },
    component: home
}]

各模块路由编写成功后,接下来就是将这些路由整合起来放在入口index.js中

访问每个路由,即可实现跳转