update
uni-simple-router 3.0 版本已发布,欢迎你的使用!

# 自动构建路由表

注意

独立的库适合任何方式初始化的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','aliasPath']
					});
					return JSON.stringify(tfPages.routes)
				}, true )
			})
		]
	}
}
1
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

# 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

你可以在 pages.json 下配置任何编译器能通过的选项!另外如果你需要更多配置读取。可以配置 uni-read-pages 下的 includes 选项。

# 配置路由表






 















// router.js
import {RouterMount,createRouter} from 'uni-simple-router';

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,  
	routes: [...ROUTES]
});
//全局路由前置守卫
router.beforeEach((to, from, next) => {
	next();
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

export {
	router,
	RouterMount
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

很简单! 咋们借助 webpack 轻松注入全局变量,在项目中任何地方都可以使用啦。重启生效!更多API请查阅 uni-read-pages 文档 runtime-values-via-runtimevalue