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