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