基于Vue+Webpack拆分路由文件實現(xiàn)管理
事實是，如果你的項目不是特別大，一般是用不著分拆的。如果項目大了，那就需要考慮分拆路由了。其實，這個操作并不復(fù)雜。
當我們用 vue-cli 工具，創(chuàng)建一個新的 vue 項目時，就已經(jīng)給大家新建好了一個路由文件 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
}
]
})
我們以這個文件為藍本，進行調(diào)整。舉例，我們現(xiàn)在要新建一個 news 的這個路由，然后這個路由下面，還有一些子路由，我們就可以這樣寫：
router/index.js 文件調(diào)整
// 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>
子路由視圖組件就異常簡單了，如上，三行代碼即可，有關(guān) router-view 的相關(guān)內(nèi)容，請查看：
https://router.vuejs.org/zh/api/#router-view
router/news.js 子路由配置文件
其實，配置這個文件和 vue 沒有什么關(guān)系，純粹就是 js es6 的導出和導入而已。
import main from '@/page/news/main'
import details from '@/page/news/details'
export default [
{path: '', component: main},
{path: 'details', component: details}
]
如上，即可。我們就完成了路由的多文件管理了。這樣看，是不是很簡單呢？有什么問題，請在評論中留言，我會抽時間答復(fù)大家。
更多內(nèi)容，請參考官方網(wǎng)站：https://router.vuejs.org/zh/
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動效果
這篇文章主要介紹了vue watch深度監(jiān)聽對象實現(xiàn)數(shù)據(jù)聯(lián)動的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)內(nèi)容可滾動的彈窗效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了淺談vuex為什么不建議在action中修改state，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴充性,執(zhí)行最佳實踐的代碼方式,自動完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個VSCode插件,需要的朋友可以參考下2022-12-12
由于開發(fā)需要,我需要在登錄成功請求成功后,調(diào)用父窗口的一個點擊事件方法,這篇文章主要給大家介紹了關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的相關(guān)資料,需要的朋友可以參考下2023-01-01
本文介紹了如何在Vue3項目中整合Live2D技術(shù),從Live2D的基本介紹到在Vue3中的具體實現(xiàn)方法,Live2D技術(shù)允許開發(fā)者將二維圖像轉(zhuǎn)化為可動畫的三維模型,主要應(yīng)用于游戲、虛擬角色等領(lǐng)域,文章詳細說明了在vue3項目中使用Live2D的步驟,感興趣的朋友一起看看吧2024-10-10
自定義指令是一種在Vue應(yīng)用程序中擴展HTML標簽的能力，通過自定義指令，我們可以直接在模板中使用指令名，下面我們就來看看項目中具體如何使用自定義指令的吧2023-08-08
這篇文章主要為大家介紹了用了babel是否還需要polyfill的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue中的過濾器及其時間格式化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12