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>
至此，路由设置基本完毕，具体跳转方式及路由拦截请参照官网。
