vue3 页面使用路由怎么跳转

在Vue 3中，使用Vue Router进行页面之间的导航非常常见。以下是一个基本的步骤来设置和实现路由跳转：

1. 安装依赖：
首先，你需要安装Vue Router库，可以通过npm或yarn安装：

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

2. 导入并配置Router：
在你的项目中，通常会在`main.js`或`App.vue`文件里引入并创建Router实例：

   import Vue from 'vue'
   import Router from 'vue-router'
   import Home from '@/views/Home.vue' // 假设Home.vue是你的主页组件

   Vue.use(Router)

   const routes = [
     { path: '/', name: 'Home', component: Home },
     // 添加其他路由配置...
   ]

   const router = new Router({
     routes,
   })

3. 跳转路由：
使用`router.push`方法进行路由的前向导航：

   router.push('/about') // 跳转到'/about'路径
   // 或者直接在组件内导航
   this.$router.push('/about')

如果你想用路由链接，可以这样写：

   <router-link to="/about">About</router-link>

4. 路由守卫：
可以使用`beforeEach`等路由守卫来控制用户的导航行为，如登录验证。