uniapp怎么跳转页面？两种方式介绍

uniapp跳转页面方式介绍

作为一款基于Vue.js开发的跨平台应用，uniapp将小程序、H5、App三个平台进行了整合，提供了一种基于Vue.js的开发方式，开发者可以通过uniapp快速、高效地构建跨平台应用，其中，页面跳转也是开发过程中的必备功能之一。本文将介绍uniapp中两种常用的页面跳转方式。

方式一：vue-router跳转

vue-router是Vue.js官方的路由管理库，uniapp也可以使用vue-router进行页面跳转。下面是具体实现步骤：

步骤一：安装vue-router

在uniapp项目根目录下，使用npm安装vue-router。

npm install vue-router

步骤二：创建router目录

在uniapp项目的根目录下，创建一个router目录，并在该目录下创建一个index.js文件，用于定义路由。

步骤三：定义路由规则

在router/index.js文件中，定义路由规则，例如：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

其中，routes数组中的每一项都代表一个路由规则，path表示路由路径，name表示路由名称，component表示该路径对应的组件。

步骤四：在页面中使用

在需要跳转的组件中，使用vue-router的编程式导航方式进行跳转：

<template>
  <div class="home">
    <h1>这是首页</h1>
    <button @click="gotoAbout">跳转到关于页面</button>
  </div>
</template>
<script>
export default {
  methods: {
    gotoAbout() {
      this.$router.push({ path: '/about' })
    }
  }
}
</script>

其中，this.$router.push({ path: '/about' })表示跳转到/about路径对应的组件。

方式二：uni.navigateTo跳转

uniapp提供了一系列API用于页面跳转，其中，uni.navigateTo API可以用于在当前页面打开新页面，并可以在新页面中返回原页面。下面是具体实现步骤：

步骤一：在页面中使用

在需要跳转的组件中，使用uni.navigateTo API进行页面跳转，例如：

<template>
  <div class="home">
    <h1>这是首页</h1>
    <button @click="gotoAbout">跳转到关于页面</button>
  </div>
</template>
<script>
export default {
  methods: {
    gotoAbout() {
      uni.navigateTo({
        url: '/pages/about/about'
      })
    }
  }
}
</script>

其中，url表示需要跳转的页面路径，需要注意的是，url需要使用相对路径，例如‘/pages/about/about’。如果使用绝对路径，则只能在web端使用。

步骤二：在新页面中返回原页面

在跳转到新页面后，可以在新页面中使用uni.navigateBack API返回原页面，例如：

<template>
  <div class="about">
    <h1>这是关于页面</h1>
    <button @click="goBack">返回首页</button>
  </div>
</template>
<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

其中，uni.navigateBack()表示返回上一个页面。如果需要返回到更早之前的页面，则可以使用uni.navigateBack({delta: 2})的方式。

总结

本文介绍了uniapp中两种常用的页面跳转方式：使用vue-router进行页面跳转和使用uni.navigateTo API进行页面跳转，分别对应编程式导航和打开新页面。在实际开发中，需要结合具体需求选择适合的跳转方式并进行相应的实现。