What are the common routing and page jump APIs of uniapp?

Uniapp is a cross-platform application development framework based on Vue.js. Through unified syntax specifications and encapsulated APIs, it supports the rapid construction of multi-platform applications such as mini programs, H5, and Apps, and provides rich routing and pages. Jump API to realize jumps between applications and interaction between pages.

Let’s introduce Uniapp’s common routing and page jump APIs in detail:

Routing

Routing refers to the jump rules between applications. Uniapp provides a variety of Routing configuration methods include global routing configuration, page-specific configuration, component routing configuration, etc. Routing can realize fast jumps between applications and parameter transfer between pages.

1. Global routing configuration

The global routing configuration includes all routing rules of the application and is configured in the main.js file. The specific method is as follows:

import App from './App'

// 全局路由配置
const router = uni.createRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: () => import('@/pages/home/index.vue')
        },
        {
            path: '/category',
            name: 'category',
            component: () => import('@/pages/category/index.vue')
        },
        {
            path: '/goods/:id',
            name: 'goods',
            component: () => import('@/pages/goods/index.vue')
        },
        //...
    ]
})

App.mpType = 'app'
App.router = router
App.vue = new Vue({
    router,
    render: h => h(App)
}).$mount()

In the global routing configuration, multiple routing rules can be defined. Each routing rule contains three attributes: path, name and component. Among them, path represents the path of the route, name represents the name of the route, and component represents the component corresponding to the route.

In Uniapp, routing jumps can be achieved through APIs such as uni.navigateTo, uni.switchTab, uni.reLaunch, etc. Next, we will introduce the usage of these APIs in detail.

2. Page-exclusive routing configuration

Page-exclusive routing configuration allows you to define routing rules for a specific page and write the routing rules in the page configuration. The specific method is as follows:

<template>
  <view class="container">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'home',
  // 页面独享配置
  onUniNaviationBarTap(){
    uni.navigateTo({
      url:'/pages/category/index'
    })
  }
}
</script>

<style>
/* ... */
</style>

In the page exclusive configuration, you can define multiple routing rules and trigger them in the form of events. These events include onLoad, onShow, onUnload, onHide, etc.

3. Component routing configuration

Component routing configuration can realize routing jumps between components and write routing rules in the components. The specific method is as follows:

<template>
  <view class="container" @click="goToGoodsDetail">
      <!-- ... -->
  </view>
</template>

<script>
export default {
  name: 'product-card',
  methods: {
    goToGoodsDetail() {
      uni.navigateTo({
        url: '/pages/goods/index?id=' + this.goodsId
      })
    },
  },
  props: {
    goodsId: {
      type: String,
      required: true,
    },
  },
}
</script>

<style>
/* ... */
</style>

By defining routing rules in the component and triggering uni.navigateTo, jumps between components can be achieved.

Page Jump API

Uniapp provides a variety of page jump APIs, including navigateTo, redirectTo, switchTab, reLaunch, etc. Through these APIs, fast jumps between applications can be achieved. and parameter passing between pages.

1. navigateTo

navigateTo is one of the most commonly used page jump APIs. It is used to open a new page on the current page. The new page can be returned to through uni.navigateBack The current page.

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

In navigateTo, url represents the page path to jump to, which can be a relative path or an absolute path.

2. redirectTo

redirectTo is used to close the current page and open a new page. The new page cannot return to the current page through uni.navigateBack.

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

3. switchTab

switchTab is used to open the Tab page of the application. The page cannot pass parameters. The initialization operation can be implemented through onLoad on the Tab page.

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

4. reLaunch

reLaunch is used to close all pages and open a new page. The new page can return to the current page through uni.navigateBack.

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

Summary

This article introduces Uniapp’s common routing and page jump APIs in detail. In application development, routing and page jumps are a very important part. Through flexible configuration and Using these APIs, you can realize jumps between applications and interactions between pages, bringing users a better experience and better services.

The above is the detailed content of What are the common routing and page jump APIs of uniapp?. For more information, please follow other related articles on the PHP Chinese website!