# 自动构建路由表
注意
独立的库适合任何方式初始化的uni项目。查看 uni-read-pages 文档
一直以来路由表都需要额外配置。很多人都很烦配置多余 麻烦！啥也不说，看代码！！
# 安装
npm install uni-read-pages
1
接着我们配置 vue.config.js，如果你的项目下没有 vue.config.js 那请你手动新增下。
# 配置 vue.config.js
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
ROUTES: webpack.DefinePlugin.runtimeValue(() => {
const tfPages = new TransformPages({
includes: ['path', 'name', 'meta']
});
return JSON.stringify(tfPages.routes)
}, true )
})
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
默认情况下 uni-read-pages 包含的字段很简单，如果你需要获取更多参数，那么请配置参数！看操作....
const tfPages = new TransformPages({
includes:['path','name','meta']
})
1
2
3
2
3
# pages.json 中配置 routes
//pages.json
{
"pages": [
{
"path": "pages/index/index",
"name":"index",
"meta":{
"title": "首页"
},
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
你可以在 pages.json 下配置任何编译器能通过的选项！另外如果你需要更多配置读取。可以配置 uni-read-pages 下的 includes 选项。
# 配置路由表
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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
很简单! 咋们借助 webpack 轻松注入全局变量，在项目中任何地方都可以使用啦。重启生效！更多API请查阅 uni-read-pages 文档 runtime-values-via-runtimevalue