基於VueCli的約定式路由插件

參考umi的約定式路由作了個簡單的vue約定式路由插件

環境

• Vue CLI 3.1.0
• VueRouter 3.02

功能簡介

假設 pages 目錄結構以下：

+ pages/
  + $folder/
    - page.vue
    - _layout.vue
  - index.vue

那麼，該插件會自動生成路由配置以下：

function Index() {
  return import(/* webpackChunkName: "page-index" */ '@/pages/index.vue')
}
function FolderLayout() {
  return import(
    /* webpackChunkName: "page-$folder-layout" */ '@/pages/$folder/_layout.vue'
  )
}
function FolderPage() {
  return import(
    /* webpackChunkName: "page-$folder-page" */ '@/pages/$folder/page.vue'
  )
}
export default [
  {
    path: '/',
    redirect: '/index'
  },
  {
    name: 'index',
    path: '/index',
    component: Index
  },
  {
    name: '$folder-layout',
    path: '/:folder/layout',
    component: FolderLayout,

    children: [{ name: '$folder-page', path: 'page', component: FolderPage }]
  }
]

安裝及其使用

vue add easy-routing

在main.js中引入生成的路由，並使用

import router from './router'
··············
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在App.vue中加入<router-view />

<template>
  <div id="app">
    <router-view />
  </div>
</template>

若是沒有安裝過vue-router，須要進行安裝npm install vue-router
最後啓動項目

npm run serve

• 在src/pages中添加一個新的頁面newPage.vue,並在其中寫上相關代碼
• 保存後，再在已有的頁面上保存，編譯後在瀏覽器中輸入http://localhost:8080/newPage，即可出現相關頁面

配置

安裝vue-cli-plugin-easy-routing後，會在vue.config文件裏生成如下配置項

pluginOptions: {
    easyRouting: {
      pages: 'src/pages',
      chunkNamePrefix: 'page-',
      redirectPath: 'index'
    }
}

pages

該配置項主要是用來生成路由的地址，默認爲src/pages

chunkNamePrefix

該配置項用來設置默認打包前綴名

redirectPath

該配置項用來設置默認的redire重定向的路由
注意: 如若不設置，則默認爲/index，若是設置了嵌套路由的佈局，須要在此設置重定向路由

動態路由匹配

咱們常常須要把某種模式匹配到的全部路由，全都映射到同個組件。例如，咱們有一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，咱們能夠在 vue-router 的路由路徑中使用「動態路徑參數」(dynamic segment) 來達到這個效果:

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

爲能生成以上路由，使用到動態路由功能，咱們約定:

• 在頁面前綴使用$表明該頁面爲動態路由

├─pages
      │  about.vue
      │  index.vue
      │
      └─dynamic
        $dynamic.vue

生成的路由就爲:

·····
function DynamicDynamic() {
  return import(
    /* webpackChunkName: "page-dynamic-dynamic" */ '@/pages/dynamic/$dynamic.vue'
  )
  ·····
}

export default [
  ·····
  {
    name: 'dynamic-dynamic',
    path: 'dynamic/:dynamic',
    component: DynamicDynamic
  }
  ·····
]

不生成路由

有些頁面不須要有路由生成，爲了這種狀況，咱們約定:

• 採用$爲後綴表明該頁面不須要生成路由

├─pages
      │  about.vue
      │  index.vue
      │  noroute$.vue 
      │
      └─dynamic
        $dynamic.vue

含有路由元的路由

• 在.vue頁面內<route-meta>自定義模塊內寫相應的json

<route-meta>
{
  "str":"str",
  "number":113,
  "boolean":true,
  "array":["array"]
}
</route-meta>

生成的路由:

{
    name: 'hasMeta',
    path: 'hasMeta',
    component: HasMeta,
    meta: { str: 'str', number: 113, boolean: true, array: ['array'] }
  },

嵌套路由

在實際項目中咱們常常是要用到嵌套路由的功能，所以咱們約定:

• 在頁面前綴使用_表明該頁面爲佈局
• 能夠嵌套多層路由

├─pages
      │  about.vue
      │  index.vue
      │  _layout_.vue 
      └─folder
          _layout.vue 
          page.vue

生成的路由:

function FolderLayout() {
  return import(
    /* webpackChunkName: "page-folder-layout" */ '@/pages/folder/_layout.vue'
  )
}
function FolderPage() {
  return import(
    /* webpackChunkName: "page-folder-page" */ '@/pages/folder/page.vue'
  )
export default [ 
  ·····
  {
    name: 'folder-layout',
    path: 'folder/layout',
    component: FolderLayout,
    children: [{ name: 'folder-page', path: 'page', component: FolderPage }]
  }
  ·····
]

git地址

• VUE-CLI-PLUGIN-EASY-ROUTING

相關工程

• easy-route