uniapp语法中如何使用路由进行页面跳转

在uni-app开发中，路由是不可或缺的功能之一。通过路由，我们能够实现页面间的流畅跳转，提升用户体验。因此，深入了解uni-app的路由机制至关重要。值得注意的是，uni-app的路由机制基于vue-router进行封装，这意味着我们可以充分利用vue-router提供的各种功能来实现页面导航。

安装vue-router

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

在根目录下的main.js中创建一个路由对象

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

Vue.use(Router)

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

export default router

在页面中使用路由进行跳转

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