uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、H5、以及各种小程序等多个平台。
在 uni-app 中，路由器是用于进行页面跳转和传参的重要工具。然而，由于 uni-app 的跨平台特性，它使用的不是 vue-router 的语法。在 uni-app 中，路由的用法是使用 uni.navigateTo方法，例如：uni.navigateTo({url:../login/login?id=12345})。
以下是一个简单的 uni-app router 使用的例子：
在页面中定义导航条目：
<template>
<view>
<text @click="toPage1">Page 1</text>
<text @click="toPage2">Page 2</text>
</view>
</template>
<script>
export default {
methods: {
toPage1() {
uni.navigateTo({ url: '../page1/page1' });
},
toPage2() {
uni.navigateTo({ url: '../page2/page2' });
}
}
};
</script>
在 pages.json中配置路由：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/page1/page1",
"style": {
"navigationBarTitleText": "页面 1"
}
},
{
"path": "pages/page2/page2",
"style": {
"navigationBarTitleText": "页面 2"
}
}
],
"globalStyle": {
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/static/tabbar/home.png",
"selectedIconPath": "/static/tabbar/home-active.png"
},
{
"pagePath": "pages/page1/page1",
"text": "页面 1",
"iconPath": "/static/tabbar/menu.png",
"selectedIconPath": "/static/tabbar/menu-active.png"
},
{
"pagePath": "pages/page2/page2",
"text": "页面 2",
"iconPath": "/static/tabbar/search.png",
"selectedIconPath": "/static/tabbar/search-active.png"
}
]
}
}
}
