创建新页面和页面路由跳转

前言

在 uni-app 项目中，创建新页面并配置其样式是非常常见的操作。无论是新增功能页面，还是自定义页面样式，都需要在项目中创建新的页面文件，并在 pages.json 中定义其路径。以下是创建新页面并配置页面路由跳转的步骤。

一、新建页面

你可以直接新建页面文件，也可以先创建目录，再在目录中创建页面文件。推荐的方法是根据项目的结构先创建对应的目录，这样便于管理和维护多个页面。

步骤如下

1. 右键项目目录，选择 “新建目录”，为新页面创建一个文件夹。例如，我们可以创建一个名为 ucenter 的目录。

   

2. 新建页面文件：进入刚创建的目录，右键目录，选择 “新建 Vue 文件”，并命名为 ucenter.vue。

   

3. 确认页面文件创建成功：你现在可以在项目中看到新创建的 ucenter.vue 文件，该文件是一个新的 Vue 页面。

   

4. 页面内容编辑：打开 ucenter.vue 文件，并为页面添加基本内容，例如页面的模板、样式和逻辑。

   <template>
     <view class="container">
       <text>这是新创建的个人中心页面</text>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {};
     },
     methods: {}
   };
   </script>
   
   <style>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #f5f5f5;
   }
   </style>
   

   

二、配置页面路径和样式

创建页面文件后，你还需要将页面路径添加到 pages.json 中，以便应用知道这个页面存在。pages.json 文件不仅用来定义页面路径，还可以配置每个页面的导航栏样式等。

配置步骤

1. 打开 pages.json 文件。

2. 在 pages 数组中新增一项，配置新页面的路径。路径指向新创建的 ucenter.vue 文件，并可以为该页面设置特定的导航栏样式。

   {
     "pages": [
       {
         "path": "pages/test/test",  // 设置新页面的路径，指向新建的 test.vue 文件
         "style": {
           "navigationBarTitleText": "个人中心",  // 设置页面的导航栏标题
           "navigationBarBackgroundColor": "#ff55ff",  // 设置导航栏背景颜色为粉色
           "navigationBarTextStyle": "white"  // 设置导航栏文字颜色为白色
         }
       }
     ]
   }
   

   在这个例子中，我们配置了新页面的路径为 pages/ucenter/ucenter，并且为该页面设置了自定义导航栏样式：导航栏的背景颜色为粉色，文字颜色为白色，标题显示为“个人中心”。

   

三、预览页面

完成页面的创建和配置后，你可以在开发工具中预览该页面。你可以通过模拟器或浏览器进行预览。

浏览器预览步骤

1. 打开项目的开发工具，选择 “运行” 选项，选择 “在浏览器中打开”。

2. 在浏览器的地址栏中输入新页面的路径，例如：localhost:8080/#/pages/ucenter/ucenter，查看新创建的页面是否正常显示。

   如果页面显示正常，你应该能看到页面展示了“这是新创建的个人页面”的内容，并且导航栏标题显示为“个人中心”，导航栏背景颜色为粉色，文字颜色为白色。

   

   你还可以发现页面的导航栏样式成功覆盖了全局配置的样式，展示了该页面独有的导航栏设置。

四、页面路由跳转

在 uni-app 中实现页面之间的跳转，主要依靠 uni.navigateTo、uni.redirectTo、uni.switchTab 等API。下面是常见的几种跳转方式及使用示例：

1. 常见的跳转API

1. uni.navigateTo(options)

   • 跳转到非 TabBar 页面，保留当前页面历史，可使用 uni.navigateBack() 返回。

   • 示例：

     uni.navigateTo({
       url: '/pages/ucenter/ucenter' // 跳转到个人中心页面
     });
     

   • 优点：可返回上一个页面；缺点：层级过深时会有页面栈限制（微信小程序限制最多5层）。

2. uni.redirectTo(options)

   • 跳转到非 TabBar 页面，关闭当前页面，无法返回上一页。

   • 示例：

     uni.redirectTo({
       url: '/pages/ucenter/ucenter'
     });
     

   • 适用场景：如登录成功后，不允许返回到登录页。

3. uni.switchTab(options)

   • 跳转到 TabBar 页面，并关闭其他所有非 TabBar 页面。

   • 示例：

     uni.switchTab({
       url: '/pages/home/home' // 必须在 pages.json 的 tabBar 中配置对应页面才能跳转成功
     });
     

   • 适用场景：在底部或顶部标签切换的应用结构中，跳转至指定 Tab。

4. uni.reLaunch(options)

   • 关闭所有页面，打开到指定页面。

   • 示例：

     uni.reLaunch({
       url: '/pages/index/index'
     });
     

   • 适用场景：如做“重启应用”或“退出登录后回到首页”等。

2. 在页面中使用示例

假设我们在首页（pages/index/index.vue）添加一个按钮，点击后跳转到新建的个人中心页面（pages/ucenter/ucenter.vue）。

<template>
  <view class="index-container">
    <view class="btn" @click="goUcenter">跳转到个人中心</view>
  </view>
</template>

<script>
export default {
  methods: {
    goUcenter() {
      uni.navigateTo({
        url: '/pages/ucenter/ucenter'
      });
    }
  }
};
</script>

<style>
.index-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.btn {
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
}
</style>

说明：

1. @click 事件调用 goUcenter() 方法。
2. goUcenter() 方法中使用 uni.navigateTo 函数，传入 url 参数，就可以在点击按钮后跳转到“个人中心”页面。

3. 页面间传参

如果需要在跳转时传递参数，可以在 url 后面拼接 query。例如：

uni.navigateTo({
  url: '/pages/ucenter/ucenter?userId=123'
});

在目标页面 onLoad 或 onShow 中通过 options 获取参数：

onLoad(options) {
  console.log(options.userId); // 123
}