# router

**Repository Path**: CXQFJ/router

## Basic Information

- **Project Name**: router
- **Description**: SPA，监听哈希变化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: v1.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2018-09-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rx.router
![logo](https://leave_work_on_time.gitee.io/router/logo.png)

#### 项目介绍
SPA的路由控制，特点是没有UI框框的限制，每个路由的上可以自由控制自己的子路由，目前只支持在Vue环境下使用。

#### 架构
* 路径配置[path-to-regexp](https://www.npmjs.com/package/path-to-regexp/)
* `hashChange` 地址栏模块切换
* `pushState` js跳转、存储参数（history.state）
* `replaceState` 路径替换
* `Vue.mixin` 混入`created`
* `created` 中 `Vue.util.defineReactive(this,'$rxRouterInfo',new Info(this))` 扩展当前实例`this`
* `Vue.prototype.$rxRouter` 绑定到Vue原型链


#### 安装教程

无

#### 使用说明

* 标签引入 `dist/static/rx.router.js`

##### 初始化

 `Vue.prototype.$rxRouter.init(menus,congig)` 初始化，接收两个参数 `menus`，`config`

    必须在根组件引入之前初始化。
路径配置[path-to-regexp](https://www.npmjs.com/package/path-to-regexp/)
 1. menus

  ```
    {
      children:[] //子页面
      others:[] //目录下的子页面（班级详情）
      pagename: 'App',
      name: '首页',
      //返回组件的promise
      component: () =>import ( /* webpackChunkName: "home" */ './pages/home.vue'),
      //详细的路径配置在下面，不配置会在初始化时候生成
      [path]: "/",
    }
  ```

  2. config

  ```
  Vue.prototype.$rxRouter.init(menus,{
    onBeforeChange(pagename){
      //路由切换之前的检查
    },
    onBeforeExit(){
      //退出系统
    }
  })

  ```

##### 路由控制

组件实例扩展了$rxRouterInfo，页面的路由信息`menus`、`pages`、`current`
* `menus` Array 子路由的信息
* `pages` Array 加载的页面们
* `current` Object 组成 当前显示的页面
以上三个信息又包含以下信息，项目之间没有引用
* pagename
* name
* path
* children

原型链下面扩展了$rxRouter
1. 路由跳转`this.$rxRouter.goTo(pagename,params)`
2. 删除page `this.$rxRouter.removePage(pagename)`
3. 小demo：

```
export default {
  methods:{
    removePage(item){
      //移除一个pages
      this.router.removePage(item)
    }
  },
  created(){
    //显示时调用的方法
    this.onRouterShow = (params))=>{

    }
    //隐藏是调用的方法
    this.onRouterHide = (params))=>{

    }
  }
};

```

#### 其他

[快点我上车体验吧](https://leave_work_on_time.gitee.io/router/#/)



#### 参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [http://git.mydoc.io/](http://git.mydoc.io/)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)