Vue + Webpack 將路由文件分拆爲多個文件分別管理簡明教程

Vue + Webpack 將路由文件分拆爲多個文件分別管理簡明教程

近日，有網友留言，詢問，如何將 vue 的路由分拆爲多個文件進行管理。這當然是可以的。今天我就來寫一個簡單的教程，希望對大家有所幫助。

事實是，如果你的項目不是特別大，一般是用不着分拆的。如果項目大了，那就需要考慮分拆路由了。其實，這個操作並不複雜。

當我們用 vue-cli 工具，創建一個新的 vue 項目時，就已經給大家新建好了一個路由文件 src/router/index.js ，內容如下：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

我們以這個文件爲藍本，進行調整。舉例，我們現在要新建一個 news 的這個路由，然後這個路由下面，還有一些子路由，我們就可以這樣寫：

router/index.js 文件調整

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 子路由視圖VUE組件
import frame from '@/frame/frame'

import HelloWorld from '@/components/HelloWorld'
// 引用 news 子路由配置文件
import news from './news.js'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/news',
      component: frame,
      children: news
    }
  ]
})

如上，我們引入一個子路由視圖的 vue 組件，然後再引入 news 的子路由配置文件即可。下面我們來編寫這兩個文件。

frame/frame 子路由視圖 vue 組件

<template>
  <router-view />
</template>

子路由視圖組件就異常簡單了，如上，三行代碼即可，有關 router-view 的相關內容，請查看： https://router.vuejs.org/zh/api/#router-view

router/news.js 子路由配置文件

其實，配置這個文件和 vue 沒有什麼關係，純粹就是 js es6 的導出和導入而已。

import main from '@/page/news/main'
import details from '@/page/news/details'

export default [
  {path: '', component: main},
  {path: 'details', component: details}
]

如上，即可。我們就完成了路由的多文件管理了。這樣看，是不是很簡單呢？有什麼問題，請在評論中留言，我會抽時間答覆大家。

更多內容，請參考官方網站：https://router.vuejs.org/zh/

本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。