Vue最佳实践

# 模块化路由配置

在项目开发的过程中，路由的配置可能随时发生变更，如：默认入口“/”由home页面组件改为login页面组件。因此，永远不要将路由默认入口“/”设置为组件路由。建议使用路由重定向（redirect）设置路由默认入口，使用以下的基本路由配置：

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  { 
    name: 'Home'
    path: '/home'
    component: Home,
    children: []
  },
  {
    name: 'Login',
    path: 'login',
    component: Login,
    children: []
  }
]

export default new VueRouter({
  routes
})

这样，不论后面如何变化，只需要做新增/删除路由以及改变redirect值控制默认入口即可。

在中大型项目中，会有很多的页面或模块，常出现路由嵌套的情况。此时，建议以路由层级进行模块拆分。文件结构如下：

├── router
│   ├── index.js
│   ├── home.js
│   ├── login.js

将一级路由配置在入口文件 index.js 中，将一级路由下的二级路由拆分为独立的模块：

import homeRoutes from './home'
import loginRoutes from './login'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  { 
    name: 'Home'
    path: '/home'
    component: Home,
    children: [...homeRoutes]
  },
  {
    name: 'Login',
    path: 'login',
    component: Login,
    children: [...loginRoutes]
  }
]

export default new VueRouter({
  routes
})

← 模块化组织Vuex状态 →