cris-header

介绍

阡陌云前端路由组件，提供统一的路由入口。

使用方法

1. Vue项目

1. 使用npm安装并引入，注意需要store传入作为参数

npm install cris-header

2. 在main.js中引入

import WorkHeader from 'cris-header'
import 'cris-header/dist/cris-header.css'

Vue.use(WorkHeader, { store })

3. 在页面中使用组件，根据是否是开发环境判断模块点击的路由跳转

<!-- layout.vue -->
<template>
<div>
    <!-- 顶部栏 -->
    <WorkHeader :isDev="isDev">
      <template slot="leftSlot">
	    </template>
	    <template slot="rightSlot">
	    </template>
    </WorkHeader>
    <!-- 下方区域 -->
    <div class="page-body">
      <router-view />
    </div>
</div>

<script>
export default {
    name: "Layout",
    computed() {
        isDev() {
            return process.env.NODE_ENV === 'development'
        }
    }
}
</script>

4. vue.config.js中路由配置（可选）

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      ["/apps/cris"]: {
        target: `http://localhost:8081/apps/cris`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      ['/apps/party']: {
        target: `http://localhost:8082/apps/party`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + '/apps/party']: ''
        }
      }
    },
    disableHostCheck: true
  },