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: "")