uni-app路由与页面跳转详细教程

Uniapp 是一个跨平台的应用开发框架，它允许开发者使用 Vue.js 编写一次代码，然后将应用发布到多个平台，包括 iOS、Android 和 Web。在 Uniapp 中，路由和页面跳转是非常重要的概念。本教程将详细介绍 Uniapp 中的路由和页面跳转，以及如何在应用中正确使用它们。

一、路由基础知识：

1. 什么是路由？
   路由是指确定应用程序中不同页面之间的导航规则和路径的机制。它允许用户在应用中进行页面之间的切换和导航。

2. Uniapp 中的路由功能
   Uniapp 提供了内置的路由功能，使得开发者可以轻松地定义和管理应用中的页面路由。Uniapp 使用 Vue Router 进行路由管理，开发者可以使用 Vue Router 的 API 来配置和操作路由。

二、配置路由：

1. 创建路由配置文件
   在 Uniapp 项目的根目录下，创建一个名为 router.js 的文件，用于配置应用的路由信息。

2. 导入 Vue Router
   在 router.js 文件中，首先需要导入 Vue Router 模块，可以使用以下代码：

   import Vue from 'vue'
   import Router from 'uni-simple-router'
   Vue.use(Router)
   

3. 配置路由表
   在 router.js 文件中，定义一个路由表，包含应用中的所有页面路由信息。每个路由信息包括页面路径、页面名称和页面对应的组件。

   const router = new Router({
         
         
     routes: [
       {
         
         
         path: '/home',
         name: 'Home',
         component: () => import('@/pages/home/Home.vue')
       },
       {
         
         
         path: '/about',
         name: 'About',
         component: () => import('@/pages/about/About.vue')
       },
       // 添加其他页面路由...
     ]
   })
   

4. 导出路由对象
   在 router.js 文件的末尾，导出路由对象，以便在应用的入口文件中使用。

   export default router
   

5. 在应用的入口文件中使用路由配置
   打开应用的入口文件（一般为 main.js），导入路由配置，并将其作为 Vue 实例的一个属性。

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

三、页面跳转：

1. 声明式导航
   在模板中使用 <router-link> 标签来实现页面跳转，例如：

   <router-link to="/home">Go to Home</router-link>
   <router2. 编程式导航
   在 JavaScript 代码中使用 `$router` 对象的方法进行页面跳转，例如：
   ```javascript
   // 在方法中跳转
   this.$router.push('/home')
   
   // 在事件处理程序中跳转
   this.$router.push({ path: '/home' })
   
   // 带参数的跳转
   this.$router.push({ path: '/home', query: { id: 1 } })
   

2. 路由传参
   可以通过在路由路径中添加参数来传递数据，例如：

   // 路由配置
   {
         
         
     path: '/detail/:id',
     name: 'Detail',
     component: () => import('@/pages/detail/Detail.vue')
   }
   
   // 页面跳转
   this.$router.push({
         
          path: '/detail/1' })
   

3. 获取参数
   在目标页面中，可以通过 $route.params 对象来获取路由中的参数，例如：

   // 在 Detail 页面中获取参数
   mounted() {
         
         
     const id = this.$route.params.id
     console.log(id) // 输出：1
   }
   

示例代码：

// router.js

import Vue from 'vue'
import Router from 'uni-simple-router'
Vue.use(Router)

const router = new Router({
    
    
  routes: [
    {
    
    
      path: '/home',
      name: 'Home',
      component: () => import('@/pages/home/Home.vue')
    },
    {
    
    
      path: '/about',
      name: 'About',
      component: () => import('@/pages/about/About.vue')
    },
    {
    
    
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail.vue')
    }
  ]
})

export default router

<!-- Home.vue -->

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About</router-link>
    <button @click="goToDetail">Go to Detail</button>
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    goToDetail() {
      
      
      this.$router.push({
      
       path: '/detail/1' })
    }
  }
}
</script>

<!-- Detail.vue -->

<template>
  <div>
    <h1>Detail Page</h1>
    <p>Parameter: {
   
   { $route.params.id }}</p>
  </div>
</template>

<script>
export default {
      
      
  mounted() {
      
      
    const id = this.$route.params.id
    console.log(id) // 输出：1
  }
}
</script>

以上就是 Uniapp 路由与页面跳转的详细教程，希望能对你有所帮助。通过配置路由和使用页面跳转，你可以在 Uniapp 中实现页面之间的切换和导航，以及传递参数和获取参数。