自动构建路由表

注意

独立的库适合任何方式初始化的uni项目。查看 uni-read-pages自动构建路由表 - 图1 文档

一直以来路由表都需要额外配置。很多人都很烦配置多余 麻烦！啥也不说，看代码！！

安装

  1. npm install uni-read-pages

接着我们配置 vue.config.js，如果你的项目下没有 vue.config.js 那请你手动新增下。

配置 vue.config.js

  1. const TransformPages = require('uni-read-pages')
  2. const tfPages = new TransformPages()
  3. module.exports = {
  4.     configureWebpack: {
  5.         plugins: [
  6.             new tfPages.webpack.DefinePlugin({
  7.                 ROUTES: JSON.stringify(tfPages.routes)
  8.             })
  9.         ]
  10.     }
  11. }

默认情况下 uni-read-pages自动构建路由表 - 图2 包含的字段很简单，如果你需要获取更多参数，那么请配置参数！看操作….

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

pages.json 中配置 routes

  1. //pages.json
  2. {
  3.     "pages": [
  4.         {
  5.             "path": "pages/index/index",
  6.             "name":"index",
  7.             "meta":{
  8.                 "title": "首页"
  9.             },
  10.             "style": {
  11.                 "navigationBarTitleText": "uni-app"
  12.             }
  13.         }
  14.     ],
  15.     "globalStyle": {
  16.         "navigationBarTextStyle": "black",
  17.         "navigationBarTitleText": "uni-app",
  18.         "navigationBarBackgroundColor": "#F8F8F8",
  19.         "backgroundColor": "#F8F8F8"
  20.     }
  21. }

你可以在 pages.json 下配置任何编译器能通过的选项！另外如果你需要更多配置读取。可以配置 uni-read-pages自动构建路由表 - 图3 下的 includes 选项。

配置路由表

  1. import Vue from 'vue'
  2. //这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
  3. import Router from 'uni-simple-router'
  5. Vue.use(Router)
  6. //初始化
  7. const router = new Router({
  8.     routes:ROUTES //路由表
  9. });
  11. //全局路由前置守卫
  12. router.beforeEach((to, from, next) => {
  13.   next()
  14. })
  15. // 全局路由后置守卫
  16. router.afterEach((to, from) => {
  17. })
  18. export default router;

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