1. 安裝

npm install uni-simple-router

2. 根據(jù)官網(wǎng)介紹，選擇了把router分成多個文件，具體如下

官網(wǎng)介紹

example 模塊和 home 模塊，index.js是匯集模塊

image.png

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

const home = [
  {
    path: '/pages/home',
    aliasPath: '/',  //對于h5端你必須在首頁加上aliasPath并設(shè)置為/
    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文件（此文件默認(rèn)不創(chuàng)建）

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

5. 測試

創(chuàng)建以上router中的三個頁面，同樣在pages.json中聲明

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

在 home頁面添加按鈕，測試跳轉(zhuǎn)

<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>

至此，路由設(shè)置基本完畢，具體跳轉(zhuǎn)方式及路由攔截請參照官網(wǎng)。