How to implement page jump and navigation in uniapp

How to implement page jump and navigation in uniapp

uniapp is a front-end framework that supports one-time coding and multi-end publishing. It is based on Vue.js and developers can use uniapp quickly develops mobile applications. In uniapp, implementing page jumps and navigation is a very common requirement. This article will introduce how to implement page jump and navigation in uniapp, and provide specific code examples.

1. Page jump

1. Use the methods provided by uniapp for page jump

uniapp provides a set of methods for page jump , the most common ones are the uni.navigateTo and uni.redirectTo methods. The function of these two methods is to realize page jump. The difference is that navigateTo retains the current page and jumps to the target page, while redirectTo closes the current page and jumps to the target page. page.

For example, we click a button in one page to jump to another page:

<template>
  <view>
    <button @click="navigateToPage">跳转到目标页面</button>
  </view>
</template>
<script>
export default {
  methods: {
    navigateToPage() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage'
      })
    }
  }
}
</script>

2. Use the routing navigation guard provided by uniapp

uniapp also provides routing and navigation guards. Developers can perform some processing before the page jumps, such as determining whether the user is logged in, determining whether the page requires permissions, etc.

In uniapp, you can use the beforeEnter function to implement route navigation guards. For example, we need to check the login status before loading the target page:

// main.js
import Vue from 'vue'
import App from './App'

Vue.prototype.$navigateTo = function (options) {
  // 在跳转前进行登录状态的检查
  if (!isLoggedIn()) {
    // 如果未登录，则跳转到登录页面
    uni.navigateTo({
      url: '/pages/login/login'
    })
    return
  }
  
  // 已登录，正常跳转
  uni.navigateTo(options)
}

new Vue({
  el: '#app',
  render: h => h(App)
})

// utils.js
export function isLoggedIn() {
  // 判断用户是否已登录
  // ...
}

With the above code, the login status will be checked first when the page jumps. If not logged in, it will jump to login. page.

2. Navigation

1. Top navigation bar

uniapp provides the uni-NavBar component for implementing the top navigation bar. This component can be used in uniapp pages to implement the function of the top navigation bar.

For example, to achieve the effect of the top navigation bar in a page:

<template>
  <view>
    <uni-NavBar title="首页" :show-back="true" @click-left="navigateBack"></uni-NavBar>
    <!-- 页面内容 -->
  </view>
</template>
<script>
export default {
  methods: {
    navigateBack() {
      uni.navigateBack()
    }
  }
}
</script>

In the above code, the uni-NavBar component is used, and the title is set to "Home Page ", and at the same time set up the display of the return button and bound the event of clicking the return button.

2. Bottom navigation bar

uniapp provides uni-tabbar components and uni-tabbar-item components for implementation Bottom navigation bar. These two components can be used in uniapp pages to implement the function of the bottom navigation bar.

For example, to achieve the effect of the bottom navigation bar in a page:

<template>
  <view>
    <!-- 页面内容 -->
  </view>
  <uni-tabbar>
    <uni-tabbar-item icon="home" text="首页" url="/pages/home/home"></uni-tabbar-item>
    <uni-tabbar-item icon="message" text="消息" url="/pages/message/message"></uni-tabbar-item>
    <uni-tabbar-item icon="user" text="我的" url="/pages/mine/mine"></uni-tabbar-item>
  </uni-tabbar>
</template>

In the above code, the uni-tabbar component and uni-tabbar- The item component achieves the effect of the bottom navigation bar by setting the icon, text and jump link for each uni-tabbar-item.

Summary:

The above is the method and sample code to implement page jump and navigation in uniapp. By using the methods and components provided by uniapp, we can easily implement page jump and navigation. function. At the same time, the characteristics of single-page applications also allow us to better control jumps and navigation between pages.

The above is the detailed content of How to implement page jump and navigation in uniapp. For more information, please follow other related articles on the PHP Chinese website!