VUE路由動(dòng)態(tài)加載實(shí)例代碼講解
首先新建vue工程，一般我們不會(huì)特殊處理路由，但當(dāng)項(xiàng)目頁(yè)面越來(lái)越多，路由配置也會(huì)越來(lái)越大，路由文件就會(huì)變得不好維護(hù)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './test1.router.js'
import Test2 from '@/components/children/Test2'
import Test3 from '@/components/children/Test3'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/',
name:'Home',
component:Home,
children:[
{
path:'/test2',
name:'Test2',
component:Test2,
},
{
path:'/test3',
name:'Test3',
component:Test3,
}
]
}
]
})
這是一個(gè)很簡(jiǎn)單的路由文件，我們先進(jìn)性第一步優(yōu)化，按一級(jí)菜單分類(lèi)：
新建test1.router.js文件，放置一級(jí)菜單test1下的所有路由信息
export default {
path:'/test1',
name:'test1',
component: () => import('@/components/children/Test1'),
children:[]
}
component: () => import('@/components/children/Test1')這個(gè)是配置路由懶加載，優(yōu)化首屏加載緩慢
在index.js里引入該文件
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import Test1 from './test1.router.js'
import Test2 from './test2.router.js'
import Test3 from './test3.router.js'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/',
name:'Home',
component:Home,
children:[
Test1,
Test2,
Test3
]
}
]
})
做到這塊，已經(jīng)可以滿(mǎn)足很多項(xiàng)目了，路由文件已經(jīng)很清晰了，但當(dāng)項(xiàng)目較大，依然會(huì)不清晰
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
Vue.use(Router)
let routers = [];
let getALLRouterMsg = (paths) => {
paths.keys().forEach(
(key) => routers.push(paths(key).default)
)
}
getALLRouterMsg(require.context('.',true,/\.router\.js/))
export default new Router({
routes: [
{
path:'/',
name:'Home',
component:Home,
children:[
...routers
]
}
]
})
以上就是本次介紹的全部知識(shí)點(diǎn)內(nèi)容，感謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue+axios全局添加請(qǐng)求頭和參數(shù)操作
這篇文章主要介紹了vue+axios全局添加請(qǐng)求頭和參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)中英文切換的詳細(xì)步驟,項(xiàng)目中經(jīng)常有中英文切換的功能,接下來(lái)就簡(jiǎn)單實(shí)現(xiàn)以下這個(gè)功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考2023-11-11
這篇文章主要介紹了elementPlus修改主題色以及皮膚設(shè)置思路，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-04-04
Vue3實(shí)現(xiàn)通過(guò)axios來(lái)讀取本地json文件
這篇文章主要介紹了Vue3實(shí)現(xiàn)通過(guò)axios來(lái)讀取本地json文件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問(wèn)題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
Vue實(shí)現(xiàn)一個(gè)帶有緩存功能的Tab頁(yè)簽功能
在現(xiàn)代?Web?應(yīng)用中,Tab?頁(yè)簽功能是非常常見(jiàn)的一種交互模式,它可以幫助用戶(hù)在不同的視圖間快速切換,而不會(huì)丟失當(dāng)前視圖的狀態(tài),本文將介紹如何在?Vue?項(xiàng)目中實(shí)現(xiàn)一個(gè)帶有緩存功能的?Tab?頁(yè)簽功能,需要的朋友可以參考下2024-08-08
詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程
這篇文章主要介紹了詳解一次Vue低版本安卓白屏問(wèn)題的解決過(guò)程,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05