基于Vue+Webpack拆分路由文件實現(xiàn)管理
事實是，如果你的項目不是特別大，一般是用不著分拆的。如果項目大了，那就需要考慮分拆路由了。其實，這個操作并不復雜。
當我們用 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}
]
如上，即可。我們就完成了路由的多文件管理了。這樣看，是不是很簡單呢？有什么問題，請在評論中留言，我會抽時間答復大家。
更多內(nèi)容，請參考官方網(wǎng)站：https://router.vuejs.org/zh/
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章中,我將逐步介紹如何使用 Vue 和 ECharts 實現(xiàn)一個互動式的地圖展示組件,其中支持返回上一層地圖、點擊查看不同城市的詳細信息,以及根據(jù)數(shù)據(jù)動態(tài)展示不同的統(tǒng)計信息,感興趣的小伙伴跟著小編一起來看看吧2025-02-02
Vue實現(xiàn)登錄功能全套超詳細講解(含封裝axios)
這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)登錄功能(含封裝axios)的相關(guān)資料,Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue v-on監(jiān)聽事件的相關(guān)資料，Vue.js中的監(jiān)聽事件是如何處理的，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構(gòu)建高效、靈活和可擴展用戶界面的關(guān)鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
基于vue2.0實現(xiàn)仿百度前端分頁效果附實現(xiàn)代碼
本文通過實例代碼給大家介紹了基于vue2.0實現(xiàn)仿百度前端分頁效果,在文中給大家記錄了遇到的問題及解決方法，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
作為Web Storage API的接口,Storage 提供了訪問特定域名下的會話存儲或本地存儲的功能,例如可以添加、修改或刪除存儲的數(shù)據(jù)項,這篇文章主要給大家介紹了關(guān)于如何使用Vue的思想封裝一個Storage的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實時監(jiān)控數(shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時進行相應(yīng)的操作,需要的朋友可以參考下2023-12-12
Vue CLI4.0 webpack配置屬性之productionSourceMap用法
這篇文章主要介紹了Vue CLI4.0 webpack配置屬性之productionSourceMap用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue3中如何檢測數(shù)組的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06