週二. 8 月 11th, 2020

IT Skills 波林

Polin WEI – 資訊工作者的技術手札

Use multiple files in vue router

1 min read
vue-features

Use multiple files in vue router 多個檔案合併成一個 Vue Router 要的設定檔

 

在繼續 使用 Primevue 製作 Vue 模板 , 我們要對 Vue Router 來作一下簡單的說明, 在 Layout 製作:sidebar 裡, 我們要放入選單 (Menu) , 這會用到 Vue Router 來協助達成轉換到不同的頁面, 而不作跳轉, 但若頁面一多, 那麼一個檔案就會有一堆的 router list, 很難維護. 接下來來看看如何達成多個檔案合併成一個 Vue Router 要的設定檔.

在 router目錄下的檔案: RouterDashboard.js 存放所有 Dashboard 要跳轉頁面的設定

const routes = [
  {
    path: '/Dashboard',
    name: 'dashboard',
    component: () => import('../components/Dashboard.vue')
  },
  {
    path: '/Dashboard2',
    name: 'dashboard2',
    component: () => import('../components/Dashboard2.vue')
  },
]

export default routes

 

在 router目錄下的檔案: index.js 是 Vue Router 的主程式. 要合併不同的 Vue Router 檔案, 則用 Array.concat() 來逹成. 這樣子就不會一個檔案記錄著一堆的 route list 了.

import Vue from 'vue'
import VueRouter from 'vue-router'
import RouterDashboard from './RouterDashboard'
import Welcome from '../views/Welcome.vue'

Vue.use(VueRouter)

const RouterMain = [
  {
    path: '/',
    name: 'Welcome',
    component: Welcome
  },

]

let allRoutes = []
allRoutes = allRoutes.concat(RouterMain, RouterDashboard)
const routes = allRoutes

const routers = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default routers

 

Copyright © All rights reserved. | Newsphere by AF themes.