基于VueCli的约定式路由插件
发布于 2 个月前 作者 2heal1 2076 次浏览 来自 分享

参考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地址

相关工程

回到顶部