上一节主要讲解了如何架构项目，对文件统一管理等，本节来讲应用中基本功能，路由的配置与导航栏添加。

# 注册添加首页

在设备改变路由的时候，在不同路由会渲染成不同的内容，在 Uniapp 中所有页面的路由全部由框架进行管理，即 pages.json 管理配置。 pages.json 文件中不仅可以管理路由而且可以对 Uniapp 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。

对于 Uniapp 中的每个页面，都需要在页面对应的 pages.json 文件中进行注册，才可以在访问路径中访问到该页面的数据。

可以使用编辑器注册一个页面，鼠标悬浮在左侧项目管理器那一栏，然后鼠标定位在 pages，右击鼠标：

基础页面的代码结构如下：

<template>
    <view>

    </view>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss">

</style>

然后在 pages.json 中 pages 添加一项：

"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "发现",  // 状态栏标题，覆盖掉 globalStyle 中设置的标题
        }
    },

// ...

path 指定的是页面路径，Uniapp 会根据这个路径加载处理 vue 页面，对 vue 文件的 template，script，style 进行编译处理。

注意：

• pages 节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

style 指定的是页面窗口表现，比如每个页面的状态栏、导航条、标题、窗口背景色等，页面中配置项会覆盖 globalStyle 中相同的配置项。开发这个音乐应用并不需要过多的页面特殊处理，保持原有的设置即可。

然后在浏览器即可查看这个页面 http://localhost:8080/#/pages/index/index，Uniapp 默认端口为 8080，Uniapp运行的时候会检测本机 8080 端口是否被占用，如果占用就会启用 8081 端口，其次类推。当然你可以自行设置端口，【manifest.json】>>【H5配置】>>【端口】：

# 配置导航栏

我们需要实现这样一个页面，查看导航栏可以了解到该应用至少需要5个页面，需要先注册5个页面，根据上面的方式在 pages 文件夹新建注册其他页面:

┌─pages
│  ├─index           // 首页
│  │  └─index.vue
│  └─video           // 视频
│  │  └─index.vue
│  └─mine            // 我的
│     └─index.vue
│  └─cloud           // 云村
│     └─index.vue
│  └─account         // 账号
│     └─index.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

并在 pages.json 设置 pages，tabBar:

"pages": [{ /