uPlus

添加页面

页面路由

# 前序准备

仔细阅读uniApp的 pages.json (opens new window) 配置，需要在pages.js的pages对象中添加页面配置。
uPlus (opens new window) 会在项目启动时，通过vue.config.js的配置将所有 pages对象中的配置提取出，放在全局变量ROUTES中，提取的字段如下：
path、name、aliasPath、style、title、pageParam

//  pages配置
{
  "pages": [
    {
      "path": "pages/index/dashboard/index",
      "pageParam": {
        "tab": 1,
        "icon": "icon-18"
      },
      "name": "index",
      "title": "首页",
      "style": {
      }
    }
  ]
}

# 字段解释


- pages字段
  - path  配置页面路径
  - name 路径名称（英文）
  - aliasPath 别名（选填），首页自动为 /
  - style 配置页面窗口表现
  - title 页面标题
  - pageParam uplus需要的配置项

注意

name和pageParam字段需要特别注意一下

  • name: 必须要为英文，主要作为页面内部别名形式跳转，例如：首页name为index,跳转为:uni.$co.Fun.toPage('index')
  • title: 为页面标题，如果当前页面为底部tab，title则为该底部tab显示名称
  • pageParam: 自定义配置字段，但是如果为底部导航，比如含有字段，"tab":1,icon(可选)
  • style: uniApp style (opens new window)

# vue.config.js

const TransformPages = require('uni-read-pages');
const {webpack} = new TransformPages();
module.exports = {
  chainWebpack: (config) => {
    // 发行或运行时启用了压缩时会生效
    config.optimization.minimizer('terser').tap((args) => {
      const compress = args[0].terserOptions.compress
      // 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)
      compress.drop_console = true
      compress.pure_funcs = [
        '__f__', // App 平台 vue 移除日志代码
        // 'console.debug' // 可移除指定的 console 方法
      ]
      return args
    })
  },
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        ROUTES: webpack.DefinePlugin.runtimeValue(() => {
          const tfPages = new TransformPages({
            includes: ['path', 'name', 'aliasPath', 'style', 'pageParam', 'title']
          });
          return JSON.stringify(tfPages.routes)
        }, true)
      })
    ]
  }
}

# 如果获取自动生成的pages配置 ？？

pages信息通过store处理后，存储在store的permission文件中，字段有：pages和routes，

  • pages是从page.json中获取的pages信息原结构数组
  • routes是处理后的路由对象，同时存储在config->index中，主要作为使用别名name页面间的跳转

1、可以从config中获取相关配置

import config from "@/config";
// 查看所有的配置信息 其中含有pages和routes
console.log(config);

2、同时也可以从store中获取，里面以底部导航为例：src/ayout/components/footer-tabs/index.vue

// pages路由信息
import {mapGetters} from 'vuex'

export default {
  name: "AppFooterTabs",
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'footerTabs',
    ]),
  },
}

# 页面模板

注意

每个新增的页面都应该位于Layout下，这样才能做到更好的主题控制


<template>
  <layout>
    新增页面
  </layout>
</template>

<script>
  export default {
    name: "PageName"
  }
</script>

<style scoped>

</style>

布局