uniapp开发的微信小程序新增页面和路由跳转

1.配置tab

在pages文件夹下新增两个文件夹

 

 在pages.json中配置路径：

"pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/class/class",
            "style": {
                "navigationBarTitleText": "登录"
            }
        },
    ],

 

pages.json文件增加tabBar配置（和pages在同一层级）：

// tabBar 配置
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "red",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/logo.png",
            "selectedIconPath": "static/logo.png",
            "text": "登陆"
        }, {
            "pagePath": "pages/class/class",
            "iconPath": "static/logo.png",
            "selectedIconPath": "static/logo.png",
            "text": "我的"
        }]
    },

 

2. uniapp中的路由管理

uni-app路由全部交给框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式，不支持 Vue Router。

所以新增的页面需要现在pages.json中配置相应路径才可以访问

 

3. uniapp中的路由跳转

配置了tab的页面可以直接通过点击tab项来跳转

非tab页面的路由跳转有两种方式，详见文档：https://uniapp.dcloud.io/frame?id=%e8%b7%af%e7%94%b1%e8%b7%b3%e8%bd%ac

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转

类似于vue中的<router to="url"></router>

和this.router.push(url: "")