首先新建vue工程，一般我們不會特殊處理路由，但當(dā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)可以滿足很多項目了，路由文件已經(jīng)很清晰了，但當(dā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)容，感謝大家對武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
