基于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