uni-app路由与页面跳转详细教程-向日葵屋

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

梦里梦外; 2024-03-17 12:32 101阅读 0赞

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

一、路由基础知识：

什么是路由？
路由是指确定应用程序中不同页面之间的导航规则和路径的机制。它允许用户在应用中进行页面之间的切换和导航。
Uniapp 中的路由功能
Uniapp 提供了内置的路由功能，使得开发者可以轻松地定义和管理应用中的页面路由。Uniapp 使用 Vue Router 进行路由管理，开发者可以使用 Vue Router 的 API 来配置和操作路由。

二、配置路由：

创建路由配置文件
在 Uniapp 项目的根目录下，创建一个名为 router.js 的文件，用于配置应用的路由信息。
导入 Vue Router
在 router.js 文件中，首先需要导入 Vue Router 模块，可以使用以下代码：
```
import Vue from 'vue'
import Router from 'uni-simple-router'
Vue.use(Router)
```

配置路由表
在 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')
    },
    // 添加其他页面路由...
  ]
})

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

在应用的入口文件中使用路由配置
打开应用的入口文件（一般为 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()

三、页面跳转：

声明式导航
在模板中使用 <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 } })

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

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

获取参数
在目标页面中，可以通过 $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>