路由模块插件

安装插件

可以使用下列任一命令安装这个插件的包：

npm i olym-plugin-router -D
# OR
yarn add olym-plugin-router -D

使用插件

1. 在配置项中新增 plugins 属性

import { createApp } from 'olym-framework'
createApp({
  plugins: {
    'olym-plugin-router': {
      config: 'app/app.config'
    }
  }
})

2. 新建模块配置文件 app/app.config.ts

// app/app.config.ts
import { ModuleConfig } from 'olym-plugin-router'
export default [
  {
    path: '/',
    name: 'HelloWorld',
    module: 'HelloWorld'
  }
] as ModuleConfig[]

3. 新增模块文件 src/modules/HelloWorld.vue

<template>
  <div class="demo">{{ msg }}</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const msg = ref('Welcome to use OLYM Framework')
</script>

4. 新建文件 router/index.ts

import router from 'olym-plugin-router/router'
router.beforeEach((form, to, next) => {
  // 路由跳转之前处理
  next()
})
router.afterEach(() => {
  // 路由跳转之后拦截
})
export default router

5. 在 app.ts 中添加注册 router 组件

import Vue from 'vue'
import App from './index'
import router from 'olym-plugin-router/router'
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

环境变量配置

可以在执行构建时构建不同模式中的不同的模块配置信息 olym build --mode development

OLYMJS_APP_MODULE=app/dev

配置项

moduleDir

• Type: string
• Version: 1.0.1
• Default: src/modules
• Required: false

模块目录路径

config

• Type: string
• Version: 1.0.1
• Default: app/config
• Required: false

模块配置文件