vue-cli3使用路由和循環引入路由

1.安裝路由；

npm install vue-router

2.使用：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 

3.在vue-cli3項目中使用

(1)在 src 文件夾下，創建一個 router.js 文件，和 main.js 平級

 

(2)寫入代碼，引入所需的組件

import Vue from 'vue'
import Router from 'vue-router'
 
//import組件模塊
import Login from './components/Login'
import Home from './components/Home'


Vue.use(Router)  //使用插件
 
export default new Router({
  mode: 'history',  // 在創建的 router 對象中，如果不配置 mode，就會使用默認的 hash 模式，該模式下會將路徑格式化為 #! 開頭
  routes: [
    {
      path: '/',   //  定義為/會默認顯示這個頁面
      name: 'home',
      component: Home,
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
  ]
})

 

(3) 在main.js文件里面引用

 

 

 

(4)在APP.vue文件下面寫上<router-view></router-view> 這是用來渲染通過路由映射過來的組件，當路徑更改時，<router-view> 中的內容也會發生更改

(5)上面已經配置了兩個路由，當打開 http://localhost:8080 或者 http://localhost:8080/login的時候，就會在 <router-view> 中渲染 Home.vue 組件和Login.vue

 

 4.如果我們要添加新路由組件就修改 router.js添加

 

 

 5，假如要添加10個新路由組件 或者100個，按照上面這樣寫，要累死；所以我們使用require.context循環加進來；

以下代碼是組件都放在components目錄下的，至於要引入其它目錄下面的組件用require.context查找，然后拼接放進resultComps路由組件數組就行了

 

var resultComps = []
let requireComponent = require.context(
    './components', // 在當前目錄下查找
    false, // 不遍歷子文件夾
    /\.vue$/ // 正則匹配 以 .vue結尾的文件
  )
requireComponent.keys().forEach(fileName => {

  let name = fileName.replace(/^\.\/(.*)\.\w+$/, '$1')  //正則匹配出組件名
  resultComps.push(
    {
      path: '/'+ (name=='Home' ? '' : name.toLowerCase()), //這個判斷是等於home首頁，路徑就默認為/ ，toLowerCase是轉小寫函數
      name: name.toLowerCase(),
      component: () => import('./components/'+name),  //這是引入組件函數 等於import Login from './components/Login'
    }
  );

})

 

最終修改之后是這樣的