# 自动构建路由表

注意

独立的库适合任何方式初始化的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 tfPages = new TransformPages()
module.exports = {
    configureWebpack: {
        plugins: [
            new tfPages.webpack.DefinePlugin({
                ROUTES: JSON.stringify(tfPages.routes)
            })
        ]
    }
}
1
2
3
4
5
6
7
8
9
10
11

默认情况下 uni-read-pages 包含的字段很简单,如果你需要获取更多参数,那么请配置参数!看操作....



 


const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
    includes:['path','name','meta']
})
1
2
3
4

# 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 选项。

# 配置路由表








 











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

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