欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

VUE路由動態(tài)加載實例代碼講解

 更新時間:2019年08月26日 16:07:47   作者:浪子-狼  
在本文里小編給大家整理了關(guān)于VUE路由動態(tài)加載實例代碼以及相關(guān)知識點,需要的朋友們學習下。

首先新建vue工程,一般我們不會特殊處理路由,但當項目頁面越來越多,路由配置也會越來越大,路由文件就會變得不好維護

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,
    }
   ]
 
  }
 ]
})

這是一個很簡單的路由文件,我們先進性第一步優(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)很清晰了,但當項目較大,依然會不清晰

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
   ]

  }
 ]
})

以上就是本次介紹的全部知識點內(nèi)容,感謝大家對腳本之家的支持。

相關(guān)文章

  • vue使用codemirror的兩種用法

    vue使用codemirror的兩種用法

    這篇文章主要介紹了在vue里使用codemirror的兩種用法,每種方法通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue+intro.js插件實現(xiàn)引導功能

    vue+intro.js插件實現(xiàn)引導功能

    使用 intro.js這個插件,來實現(xiàn)一個引導性的效果,經(jīng)常在一些新手引導頁遇到這樣的需求,下面通過本文給大家分享vue+intro.js插件實現(xiàn)引導功能,感興趣的朋友一起看看吧
    2024-06-06
  • 詳解vue組件之間的通信

    詳解vue組件之間的通信

    這篇文章主要介紹了vue組件之間的通信,幫助大家更好的理解和學習前端的相關(guān)知識,感興趣的朋友可以了解下
    2020-08-08
  • Vue中引入bootstrap.min.css的正確姿勢分享

    Vue中引入bootstrap.min.css的正確姿勢分享

    這篇文章主要介紹了Vue中引入bootstrap.min.css的正確姿勢,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue filters的使用詳解

    vue filters的使用詳解

    使用 filters 實現(xiàn)英文字母轉(zhuǎn)大寫,實現(xiàn)代碼超簡單,本文重點給大家介紹vue filters的使用,感興趣的朋友一起看看吧
    2018-06-06
  • Vue表單驗證?trigger:'blur'OR?trigger:'change'區(qū)別解析

    Vue表單驗證?trigger:'blur'OR?trigger:'change&ap

    利用?elementUI?實現(xiàn)表單元素校驗時,出現(xiàn)下拉框內(nèi)容選中后校驗不消失的異常校驗情形,這篇文章主要介紹了Vue表單驗證?trigger:‘blur‘?OR?trigger:‘change‘?區(qū)別,需要的朋友可以參考下
    2023-09-09
  • vue如何解決循環(huán)引用組件報錯的問題

    vue如何解決循環(huán)引用組件報錯的問題

    這篇文章主要介紹了vue如何解決循環(huán)引用組件報錯的問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • 關(guān)于vue.js中this.$emit的理解使用

    關(guān)于vue.js中this.$emit的理解使用

    本文主要介紹了關(guān)于vue.js中this.$emit的理解使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • Vue.js學習示例分享

    Vue.js學習示例分享

    本篇和大家分享的是學習Vuejs的總結(jié)和調(diào)用webapi的一個小示例;具有一定的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • 在vue中使用rules對表單字段進行驗證方式

    在vue中使用rules對表單字段進行驗證方式

    這篇文章主要介紹了在vue中使用rules對表單字段進行驗證方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06

最新評論