【uniapp】vue-cli微信小程序使用uni-simple

1. 安装

npm install uni-simple-router

2. 根据官网介绍，选择了把router分成多个文件，具体如下

官网介绍

example 模块和 home 模块，index.js是汇集模块

image.png

home文件（example.js文件类似）

const home = [
  {
    path: '/pages/home',
    aliasPath: '/',  //对于h5端你必须在首页加上aliasPath并设置为/
    name: 'home',
    meta: {
      title: '首页',
    }
 },
 {
    path: '/pages/modules/sys/login',
    name: 'login',
    meta: {
      title: '登录',
    },
  },
...
];
export default home

3. 在main.js中添加引用 （@表示src目录）

import router from '@/router'

Vue.use(router);

image.png

4. 目前还缺少一步配置！！

在项目最外层（与src同目录）建立vue.config.js文件（此文件默认不创建）

module.exports = {
  transpileDependencies:['uni-simple-router']
}

5. 测试

创建以上router中的三个页面，同样在pages.json中声明

  "pages": [
    {
      "path": "pages/home",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/modules/sys/mine",
      "style": {
        "navigationBarTitleText": "我的",
        "navigationStyle": "custom"
      }
    }
  ]

在 home页面添加按钮，测试跳转

<template>
    <view>
        <tui-button @click="toPage">测试按钮</tui-button>
    </view>
</template>

<script>
  import TuiButton from "@/components/button/button";
  export default {
    components: {
      TuiButton
    },
    methods: {
        toPage() {
        this.$Router.push({name: 'login'})
        }
    }
  }
</script>

<style scoped>
</style>

至此，路由设置基本完毕，具体跳转方式及路由拦截请参照官网。