UniApp实现路由管理与页面跳转的技巧分享-猿码集

1. UniApp介绍

UniApp是由DCloud推出的一款开发跨平台应用的框架，它基于Vue.js开发，用于开发一次代码，同时支持编译成多个平台原生应用，如iOS、Android、H5、小程序等，极大的提高了开发效率。UniApp提供了丰富的API和插件，以及一套完善的开发文档和社区支持，使得开发跨平台应用变得更加轻松和便捷。本文主要介绍UniApp中路由管理和页面跳转的技巧。

2. UniApp路由管理

在UniApp中，路由管理是围绕vue-router进行的。vue-router是Vue.js官方路由插件，它使用了HTML5的history模式和hash模式来实现单页面应用，支持动态路由、路由参数、嵌套路由等功能。在UniApp中，我们也可以轻松地使用vue-router来实现路由管理。

2.1 路径配置

路径配置是指在UniApp工程中配置路由访问路径，这里我们需要在pages.json文件中进行配置。在pages.json中可以设置path、aliasPath和name，分别对应路由路径、别名路径和路由名称。一个路径配置的例子如下：


{
  "path": "pages/home/home",
  "style": {
    "navigationBarTitleText": "首页"
  },
  "aliasPath": "/",
  "name": "home"
}

path设置路由路径，style可以设置页面样式，aliasPath则可以设置别名路径，方便用户使用，name设置路由名称。在路径配置中，我们可以使用动态路由参数，如pages/detail/detail?id=:id，其中:id就是动态路由参数。此处的detail为页面名称，后面的id是路由参数名称，可以通过this.$route.params.id来获取路由参数。

2.2 页面跳转

在UniApp中，页面跳转是通过uni-app提供的API实现的，主要有以下两种方式：

方式一：使用内置的路由API

UniApp提供了内置的API，如uni.navigateTo、uni.switchTab、uni.redirectTo等，可以实现不同跳转方式。


//跳转到某页面
uni.navigateTo({
  url: '/pages/home/home'
})
//关闭当前页面并跳转
uni.redirectTo({
  url: '/pages/home/home'
})
//跳转到tabbar页面
uni.switchTab({
  url: '/pages/home/home'
})

方式二：使用vue-router的跳转方法

这种方式与vue.js的跳转方式类似，通过$router对象可以实现跳转。例如：


//在Vue组件中跳转
this.$router.push('/pages/home/home')
//在JS代码中跳转
import {RouterMount} from 'uni-simple-router';
const router = RouterMount.getRouter('vue');
router.push('/pages/home/home');

3. 页面传值

在UniApp中，页面传值可以通过路由参数进行传递，也可以使用uni-app提供的globalData进行传递。

3.1 路由参数传递

路由参数传递可以通过在跳转时传递参数实现。例如：


//跳转到detail页面，并传递id参数为1
this.$router.push('/pages/detail/detail?id=1')
//在detail页面中获取路由参数
export default {
  onLoad(option) {
    console.log(option.query.id) //输出1
  }
}

其中，option.query.id即为路由参数，可以通过this.$route.params.id来获取。

3.2 globalData传递

全局变量globalData可以存储应用全局需要共享的数据，包括页面间的传值。当我们需要在多个页面中传递同一个值时，可以使用globalData。在App.vue中定义globalData：


export default {
  onLaunch() {
    uni.$emit('login', '123456') //发送事件，传递参数
  },
  globalData: {
    login_token: ''
  }
}

在其他页面中可以通过监听事件获取到globalData的值：


export default {
  onLoad() {
    uni.$on('login', (token) => {
      this.$store.state.token = token;
      //变量赋值给自定义的vuex state
    })
  }
}

4. 总结

本文主要介绍了UniApp中路由管理和页面跳转的技巧，包括路径配置、页面跳转和页面传值。虽然UniApp是一款新型跨平台应用开发框架，但其相比其他框架具有更好的跨平台适配性和更加便捷的API使用方式，有着更加广阔的应用前景。希望读者能够通过本文了解到UniApp中路由管理的基本概念和实现方式，并能在实际开发中灵活运用。

UniApp实现路由管理与页面跳转的技巧分享