uniapp如何使用router-view显示其他页面
时间: 2023-11-22 19:55:27 浏览: 109
在Uniapp中,可以使用`<router-view>`标签来显示其他页面。具体步骤如下:
1. 在`pages.json`中配置要显示的页面,例如:
```
{
"pages": [
{
"path": "pages/home/home",
"style": {}
},
{
"path": "pages/about/about",
"style": {}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Uniapp",
"navigationBarBackgroundColor": "#F7F7F7",
"backgroundColor": "#F7F7F7"
}
}
```
2. 在页面中使用`<router-view>`标签来显示其他页面,例如:
```
<template>
<view>
<text>这是首页</text>
<router-view></router-view>
</view>
</template>
```
3. 在需要切换页面的地方使用`uni.navigateTo()`或`uni.redirectTo()`等方法进行页面跳转,例如:
```
uni.navigateTo({
url: '/pages/about/about'
});
```
这样就可以在首页中使用`<router-view>`标签来显示其他页面了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)