UniApp路由使用教程：与普通Vue项目的核心区别

一、UniApp路由的核心机制

UniApp的路由系统与普通Vue项目存在本质区别。在普通Vue项目中，我们使用Vue Router进行路由管理，通过router.js文件配置路由表，使用<router-link>组件或this.$router.push()进行跳转。而UniApp采用完全不同的路由机制，通过pages.json文件统一管理所有页面路由，这是为了适应跨平台开发需求。

1.1 配置方式对比

​​普通Vue项目（Vue Router）​​

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

​​UniApp项目​​

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    }
  ]
}

1.2 为什么存在这种区别？

UniApp需要支持多端运行（小程序、H5、App），而不同平台的路由机制差异很大。小程序平台没有浏览器的history API，无法使用Vue Router的history模式；App端需要原生导航体验；H5端需要兼容浏览器特性。通过pages.json统一配置，UniApp在编译时可以根据目标平台生成对应的路由实现，实现"一套代码多端运行"。

二、页面跳转API详解

UniApp提供了多种页面跳转方式，每种方式适用于不同场景：

2.1 保留当前页跳转（uni.navigateTo）

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=张三',
  success: () => console.log('跳转成功'),
  fail: (err) => console.error('跳转失败', err)
})

​​特点​​：新页面入栈，可通过返回按钮或uni.navigateBack()返回原页面。

2.2 关闭当前页跳转（uni.redirectTo）

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

​​特点​​：关闭当前页面，无法返回，适用于登录后跳转首页等场景。

2.3 重启应用跳转（uni.reLaunch）

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

​​特点​​：关闭所有页面后打开新页面，触发所有页面的onUnload生命周期。

2.4 TabBar页面跳转（uni.switchTab）

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

​​特点​​：只能跳转已在tabBar中配置的页面，不支持参数传递。

三、参数传递与接收

3.1 URL传参方式

// 跳转时传参
uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=张三'
})

// 接收参数
export default {
  onLoad(options) {
    console.log(options.id)    // 输出 123
    console.log(options.name)  // 输出 张三
  }
}

​​注意​​：小程序端URL长度限制约1KB，需避免传递大量数据。

3.2 事件通道传参（复杂数据传递）

// 跳转页面
uni.navigateTo({
  url: '/pages/detail/detail',
  events: {
    acceptDataFromOpenedPage: (data) => {
      console.log(data)
    }
  },
  success: (res) => {
    res.eventChannel.emit('acceptDataFromOpenerPage', {
      data: '来自跳转页面的数据'
    })
  }
})

// 接收页面
export default {
  onLoad(options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {
      data: '来自详情页的数据'
    })
  }
}

四、条件编译处理多端差异

UniApp通过条件编译实现多端适配，这是与普通Vue项目的另一重要区别：

4.1 条件编译语法

// #ifdef H5
console.log('这是H5平台')
// #endif

// #ifdef MP-WEIXIN
console.log('这是微信小程序平台')
// #endif

// #ifdef APP-PLUS
console.log('这是App平台')
// #endif

4.2 常用平台标识

• H5：H5平台
• MP-WEIXIN：微信小程序
• MP-ALIPAY：支付宝小程序
• APP-PLUS：App平台（iOS/Android）
• MP：所有小程序平台

4.3 样式条件编译

/* #ifdef H5 */
.container {
  background-color: #f0f0f0;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.container {
  background-color: #ffffff;
}
/* #endif */

五、分包加载优化

当项目较大时，可以使用分包加载优化性能，这是UniApp特有的功能：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "subPackages": [
    {
      "root": "pagesA",
      "pages": [
        {
          "path": "list/list",
          "style": {
            "navigationBarTitleText": "列表页"
          }
        }
      ]
    }
  ]
}

​​跳转分包页面​​：

uni.navigateTo({
  url: '/pagesA/list/list'
})

六、与Vue Router的对比总结

七、最佳实践建议

1. ​​合理使用跳转方式​​：根据业务场景选择合适的跳转API，避免页面栈过深
2. ​​参数传递优化​​：简单数据使用URL传参，复杂数据使用事件通道或全局状态管理
3. ​​多端适配​​：充分利用条件编译处理平台差异
4. ​​性能优化​​：大型项目使用分包加载，减少首屏加载时间
5. ​​路径规范​​：使用绝对路径，确保与pages.json配置完全一致