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