1. 普通方式
在uniapp中，页面之间的引用方式与原生的小程序并没有太大区别，可以通过以下两种方式实现页面之间的引用，首先我们来看看最常用的一种，也是类似于Web中的链接跳转方式，即通过使用navigateTo或redirectTo去实现。
1.1 navigateTo方法
使用navigateTo方法实现页面跳转，这个方法的作用是保留当前页面，同时跳转到某个指定的页面，也就是说，切换页面后，原有页面并不会被销毁，而是留在内存中。比如下面的代码段：
// A页面的代码
uni.navigateTo({
url: '/pages/B/B'
})
这个代码的意思是，在A页面的JS文件中，通过navigateTo方法跳转到B页面，B页面的路径是“/pages/B/B”，注意，这里的路径要写成相对路径。在B页面中，如果想要返回到A页面，可以通过调用uni.navigateBack方法实现。
1.2 redirectTo方法
使用redirectTo方法实现页面跳转，跟navigateTo稍有不同，这个方法的作用是关闭当前页面，并跳转到一个指定的页面，也是就是说，原有页面被销毁了。同样，下面的代码可以实现从A页面跳转到B页面：
// A页面的代码
uni.redirectTo({
url: '/pages/B/B'
})
同样的，在B页面中，也可以通过调用navigateBack方法返回到A页面。
2. 通过路由跳转
第二种方法是通过uni-app的路由跳转来实现页面之间的引用，这个方法跟Web中的SPA应用比较像，也是通过更改路由地址来动态加载不同的组件，具体请看下面的介绍。
2.1 理解路由
在Web开发中，我们常常会听到“路由”这个词，那么什么是路由呢？简单来说，路由是指根据请求的URL，映射到相应的处理程序上，也就是说，路由是把URL和一套处理规则对应起来的机制。在前后端分离的应用中，路由通常是前端负责处理的。
在uni-app中，路由也是如此，放在了前端来处理，uni-app的路由跳转方式跟原生小程序比较像，但是更加灵活，可以在同一页面中使用多个路由渲染不同的组件，也可以通过路由切换底部tabbar的颜色等，下面我们看看如何使用路由实现页面引用。
2.2 路由基本用法
uni-app中的路由跳转既可以使用vue-router方式进行配置，也可以直接调用uni-app提供的API，这里我们介绍第二种方式。
在app.vue文件中，我们可以设置全局的路由地址，下面是示例代码：
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
router,
...App
})
app.$mount()
这段代码中，我们导入了vue、App和router文件，在实例化Vue对象的时候，将router参数传进去，说明我们使用了vue-router。接下来，在router.js文件中，我们可以配置路由信息：
import Vue from 'vue'
import Router from 'uni-simple-router'
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
component: () => import('@/pages/index.vue')
},
{
path: '/detail',
component: () => import('@/pages/detail.vue')
}
]
})
export default router
这个代码段中，我们首先导入了Vue和uni-simple-router，然后实例化Router对象，通过routes属性设置了两个路由，一个是'/'，也就是根路径的路由，另一个是'/detail'，也就是detail页面的路由。
设置路由完成之后，我们就可以在组件中进行路由跳转了，下面是实现跳转到detail页面的代码：
<template>
<view class="content">
<button @click="goToDetail">详情</button>
</view>
</template>
<script>
export default {
methods: {
goToDetail() {
uni.navigateTo({
url: '/pages/detail/detail'
})
}
}
}
</script>
这个代码中，我们写了一个goToDetail方法，当用户点击详情按钮的时候，就会触发这个方法，跳转到detail页面。注意，这里的路径是/pages/detail/detail。这个路径分为两部分，第一部分/pages是固定的，第二部分detail/detail是路由的路径，也就是路由文件中配置的path中去除'/'的部分。
同样的，如果我们想要从detail页面返回到之前的页面，可以使用uni.navigateBack方法，也可以直接在detail.vue中触发goToDetail方法，跳转回去。
总结
本文介绍了uni-app中实现页面之间的引用的两种方式，第一种是通过navigateTo和redirectTo方法实现，这个方法跟小程序的跳转方式比较像，比较适用于那种只需要简单跳转到另一个页面的情况。第二种方法是通过路由跳转实现，这个方法比较灵活，可以同时在一个页面中使用不同的路由加载不同的组件，也可以通过路由切换样式和数据等，这个方法比较适合那些功能比较复杂的页面。