uni-app配置子路由
时间: 2023-09-14 17:10:23 浏览: 832
对于uni-app的子路由配置,你可以按照以下步骤进行操作:
1. 在`pages.json`文件中,找到你的父级页面(即包含子页面的页面),在该页面的`children`字段中配置子页面。
例如,假设你有一个名为`home`的父级页面,其子页面为`subpage1`和`subpage2`,你需要在`pages.json`文件中进行如下配置:
```json
{
"pages": [
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
},
"children": [
{
"path": "subpage1",
"style": {
"navigationBarTitleText": "子页面1"
}
},
{
"path": "subpage2",
"style": {
"navigationBarTitleText": "子页面2"
}
}
]
}
]
}
```
2. 在父级页面中,使用`uni-naviagte-to`或`uni-redirect-to`标签跳转到子页面。示例如下:
```html
<template>
<view>
<text @click="navigateToSubpage1">跳转到子页面1</text>
<text @click="navigateToSubpage2">跳转到子页面2</text>
</view>
</template>
<script>
export default {
methods: {
navigateToSubpage1() {
uni.navigateTo({
url: '/pages/home/subpage1'
});
},
navigateToSubpage2() {
uni.navigateTo({
url: '/pages/home/subpage2'
});
}
}
}
</script>
```
这样,你就配置了uni-app的子路由。当点击父级页面中的文本时,将会跳转到相应的子页面。
阅读全文