How to use routing for page jump in uniapp

How to use routing in uni-app for page jump

In uni-app development, routing is one of the most commonly used functions. By using routing, we can jump between pages to achieve a good user experience. This article will introduce how to use routing to jump to pages in uni-app, and provide specific code examples for reference.

First, we need to understand the routing mechanism in uni-app. The routing mechanism of uni-app is encapsulated by vue-router, so we can use the relevant methods of vue-router to jump to the page.

1. Install vue-router

Use npm or yarn to install vue-router. The specific command is as follows:

npm install vue-router
# 或者
yarn add vue-router

2. Create routing object

In uni-app, we need to create a routing object in the main.js file in the root directory. The specific code is as follows:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 根据需要配置页面的路由地址
    { path: '/home', component: () => import('@/pages/home') },
    { path: '/about', component: () => import('@/pages/about') },
    // ...
  ]
})

export default router

In the above code, we defined two routes /home and /about, and specified the corresponding components.

3. Use routing to jump in the page

In the page that needs to be jumped, we can use <router-link></router-link> Or $router.push() method to jump to the page.

The sample code for jumping using the <router-link></router-link> tag is as follows:

<template>
  <div>
    <router-link to="/home">跳转到首页</router-link>
    <router-link to="/about">跳转到关于页面</router-link>
  </div>
</template>

In the above code, by giving <router-link> tag specifies the to attribute to specify the page path to jump to. </router-link>

The sample code for jumping using the $router.push() method is as follows:

<template>
  <button @click="goToHome">跳转到首页</button>
  <button @click="goToAbout">跳转到关于页面</button>
</template>
<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home')
    },
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

In the above code, by using this in the click event .$router.push() method to implement page jump.

Through the above two methods, we can jump between pages in uni-app. In actual development, we can configure the routing addresses of more pages as needed and jump between different pages at will.

Summary:

Through the above introduction, we have learned how to use routing to jump pages in uni-app, and provided specific code examples. Using routing can facilitate us to jump between different pages, providing a better user experience and functional interaction. I believe that after mastering these knowledge points, you will be able to easily implement page jumps in uni-app development.

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