uniapp中的一個完全相似Vue-router的路由插件

本人小白，干這一行時間還短，出現什么問題望大佬指正。
這篇文章是結合文檔然后加入自己的部分理解。
uni-simple-router
一個更為簡潔的Vue-router，專為 uni-app 量身打造
插件作者： [e-mail]
插件文檔：[插件文檔地址](http://hhyang.cn/)
1.引入
三種引用方式
第一種 npm安裝
項目根目錄命令行執行

```yaml
npm install uni-simple-router
```

第二種 插件市場（使用HBuilderX導入插件）

第三種 ZIP下載 解壓

2.項目中引入

```yaml
import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后續代碼
```

引入之后就開始我們的正式使用。
第一步先在項目的根目錄下創建一個router文件夾。
格式為：

```yaml
router
|---modules
|---index.js
|---index.js
```
router中的modules文件夾是用來放路由表模板的。modules中的index.js內容為

```yaml
const files = require.context('.', false, /\.js$/)
const modules = []

files.keys().forEach(key => {
if (key === './index.js') return
const item = files(key).default
modules.push(...item)
})

export default modules
```
這個文件用來把同目錄下的js文件讀取並整合所有路由。
在這里創建的js文件代碼示例：

```yaml
const home = [
{
//注意：path必須跟pages.json中的地址對應，最前面別忘了加'/'哦
path: '/pages/home/index',
aliasPath:'/', //對於h5端你必須在首頁加上aliasPath並設置為/
name: 'index',
meta: {
title: '首頁',
},
},
{
path: '/pages/home/list',
name: 'list',
meta: {
title: '列表',
},
},
]
export default home
```
第二步配置router下的index.js

```yaml
import modules from './modules'
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分
import Router from 'uni-simple-router'

Vue.use(Router)
//初始化
const router = new Router({
routes: [...modules]//路由表
});

//全局路由前置守衛
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
})
export default router;
```
第三步 就是配置main.js

```yaml
import Vue from 'vue'
import App from './App'
import router from './router'
import { RouterMount } from 'uni-simple-router'

App.mpType = 'app'

const app = new Vue({
...App
})
//v1.3.5起 H5端 你應該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
RouterMount(app,'#app');
// #endif

// #ifndef H5
app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif
```
這樣你的路由就配置好了。
## 如果不想繁瑣的配置modules下的文件，可以用webpack自動構建路由表
安裝

```yaml
npm install uni-read-pages
```
配置 vue.config.js （可能需要手動創建）

```yaml
const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
//如果你需要獲取更多參數，那么請配置參數！
includes:['path','name','meta']
})
module.exports = {
configureWebpack: {
plugins: [
new tfPages.webpack.DefinePlugin({
ROUTES: JSON.stringify(tfPages.routes)
})
]
}
}
```
然后去pages.json里面更改配置，加入所需要的內容
最后配置路由表

```yaml
import Vue from 'vue'
//這里僅示范npm安裝方式的引入，其它方式引入請看最上面【安裝】部分
import Router from 'uni-simple-router'

Vue.use(Router)
//初始化
const router = new Router({
routes:ROUTES //路由表
});

//全局路由前置守衛
router.beforeEach((to, from, next) => {
next()
})
// 全局路由后置守衛
router.afterEach((to, from) => {
})
export default router;
```
### 最后，在配置完成以后
一定要重新編譯運行，
一定要重新編譯運行，
一定要重新編譯運行，
我剛弄完然后直接刷新的頁面，然后出了一堆問題，感覺是因為沒有重新運行的原因。當然也有可能是玄學。。。。。。。。。