How to achieve seamless routing switching between pages in uniapp

How to implement seamless routing switching between pages in uniapp

In uniapp, seamless routing switching between pages is a very common requirement. Through reasonable routing design, we can achieve smooth page switching effects and improve user experience. This article will introduce how to achieve seamless routing switching between pages in uniapp, and provide specific code examples.

1. Basic use of routing

In uniapp, routing jumps between pages can be achieved through the uni.navigateTo and uni.switchTab methods.

1. Use uni.navigateTo to route between pages

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

Through the above code, you can navigate to the page1 page under the pages folder. When using uni.navigateTo, the page will remain in the stack and you can return to the previous page through uni.navigateBack.

2. Use uni.switchTab to switch between pages

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

The above code can be used to switch to the page1 page in the bottom navigation bar. After using uni.switchTab, the page stack will be cleared, leaving only the last page.

2. Configuration of page transition effect

1. Use transition component to achieve page transition effect

When switching pages, we can use uni-app The transition component is provided to achieve the transition effect between pages. The transition component supports a variety of transition effects, such as fade, slide-up, slide-down, etc.

In App.vue:

<template>
  <view class="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </view>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

2. Customized page transition effect

In uniapp, we can set it in onLoad or onShow of the page transition attribute to achieve customized transition effects between pages.

In page1.vue:

<template>
  <view>page1</view>
</template>

<script>
export default {
  onLoad() {
    this.$options.transition = 'slide-left'
  }
}
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.5s;
}
.slide-left-enter,
.slide-left-leave-to {
  transform: translateX(100%);
}
</style>

3. Data transfer between pages

In uniapp, data transfer between pages can be achieved through parameter transfer, Vuex, local storage, etc. Data transfer.

1. Use parameter passing method

When jumping to the target page through the uni.navigateTo or uni.redirectTo method, you can pass parameters through the url.

In page A:

uni.navigateTo({
  url: 'pages/B/B?id=1&name=uniapp'
})

In page B, you can get the passed parameters through this.$route.query object:

<template>
  <view>
    <text>{{ $route.query.id }}</text>
    <text>{{ $route.query.name }}</text>
  </view>
</template>

2. Use Vuex Data transfer

In uniapp, you can use Vuex for global state management.

In index.js under the store folder:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    setUserInfo(state, info) {
      state.userInfo = info
    }
  }
})

export default store

In page A:

this.$store.commit('setUserInfo', {id: 1, name: 'uniapp'})

In page B, you can pass this.$store.state. userInfo gets the data.

4. Management of page stack

In uniapp, the management of page stack is very important. Through reasonable page stack management, seamless switching between pages can be achieved.

1. Maximum limit of page stack

In uniapp, the default page stack depth is 10 levels, that is, the oldest page will be cleared if it exceeds 10 levels. If you need to modify the page stack depth, you can configure it in the pages.json file.

"splashscreen": {
  "pages": [
    {
      "path": "pages/page1/page1",
      "style": {
        "navigationBarTitleText": "page1"
      },
      "events": {
        "init": "",
        "show": ""
      },
      "style": {},
      "window": {}
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {}
}

2. Return to the specified page

The specified page in the page stack can be returned through the uni.navigateBack method.

In the sub-page:

uni.navigateBack({
  delta: 2  // 返回上上页面
})

Through the above method, we can achieve seamless routing switching between pages in uniapp to improve the user experience. Hope the above content is helpful to you.

The above is the detailed content of How to achieve seamless routing switching between pages in uniapp. For more information, please follow other related articles on the PHP Chinese website!