事實(shí)是，如果你的項(xiàng)目不是特別大，一般是用不著分拆的。如果項(xiàng)目大了，那就需要考慮分拆路由了。其實(shí)，這個(gè)操作并不復(fù)雜。

當(dāng)我們用 vue-cli 工具，創(chuàng)建一個(gè)新的 vue 項(xiàng)目時(shí)，就已經(jīng)給大家新建好了一個(gè)路由文件 src/router/index.js ，內(nèi)容如下：

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 } ]})

我們以這個(gè)文件為藍(lán)本，進(jìn)行調(diào)整。舉例，我們現(xiàn)在要新建一個(gè) news 的這個(gè)路由，然后這個(gè)路由下面，還有一些子路由，我們就可以這樣寫(xiě)：

router/index.js 文件調(diào)整

// src/router/index.jsimport 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 } ]})

如上，我們引入一個(gè)子路由視圖的 vue 組件，然后再引入 news 的子路由配置文件即可。下面我們來(lái)編寫(xiě)這兩個(gè)文件。

frame/frame 子路由視圖 vue 組件

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

子路由視圖組件就異常簡(jiǎn)單了，如上，三行代碼即可，有關(guān) router-view 的相關(guān)內(nèi)容，請(qǐng)查看：

https://router.vuejs.org/zh/api/#router-view

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

其實(shí)，配置這個(gè)文件和 vue 沒(méi)有什么關(guān)系，純粹就是 js es6 的導(dǎo)出和導(dǎo)入而已。

import main from ’@/page/news/main’import details from ’@/page/news/details’export default [ {path: ’’, component: main}, {path: ’details’, component: details}]

如上，即可。我們就完成了路由的多文件管理了。這樣看，是不是很簡(jiǎn)單呢？有什么問(wèn)題，請(qǐng)?jiān)谠u(píng)論中留言，我會(huì)抽時(shí)間答復(fù)大家。

更多內(nèi)容，請(qǐng)參考官方網(wǎng)站：https://router.vuejs.org/zh/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。