1. 安裝
npm install uni-simple-router
2. 根據(jù)官網(wǎng)介紹矩父，選擇了把router分成多個文件址晕，具體如下
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)。
