基于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>
子路由視圖組件就異常簡(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 沒有什么關(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)單呢？有什么問題，請(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue watch深度監(jiān)聽對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)效果
這篇文章主要介紹了vue watch深度監(jiān)聽對(duì)象實(shí)現(xiàn)數(shù)據(jù)聯(lián)動(dòng)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)內(nèi)容可滾動(dòng)的彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了淺談vuex為什么不建議在action中修改state，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下2022-12-12
vue跨窗口通信之新窗口調(diào)用父窗口方法實(shí)例
由于開發(fā)需要,我需要在登錄成功請(qǐng)求成功后,調(diào)用父窗口的一個(gè)點(diǎn)擊事件方法,這篇文章主要給大家介紹了關(guān)于vue跨窗口通信之新窗口調(diào)用父窗口的相關(guān)資料,需要的朋友可以參考下2023-01-01
本文介紹了如何在Vue3項(xiàng)目中整合Live2D技術(shù),從Live2D的基本介紹到在Vue3中的具體實(shí)現(xiàn)方法,Live2D技術(shù)允許開發(fā)者將二維圖像轉(zhuǎn)化為可動(dòng)畫的三維模型,主要應(yīng)用于游戲、虛擬角色等領(lǐng)域,文章詳細(xì)說明了在vue3項(xiàng)目中使用Live2D的步驟,感興趣的朋友一起看看吧2024-10-10
自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力，通過自定義指令，我們可以直接在模板中使用指令名，下面我們就來看看項(xiàng)目中具體如何使用自定義指令的吧2023-08-08
這篇文章主要為大家介紹了用了babel是否還需要polyfill的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue中的過濾器及其時(shí)間格式化,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12