vue3编写路由跳转

在Vue3中，使用Vuex Router管理路由跳转是一种常见的做法。首先，你需要安装`@vue/router`库：

npm install @vue-router

然后，在main.js或类似入口文件中配置路由器：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router

要在组件内部进行路由跳转，可以使用`router.push`或`router.replace`方法：

// 跳转到首页
this.$router.push('/')

// 或者替换当前路径
this.$router.replace('/about')

使用导航守卫（navigators）可以添加更复杂的条件检查和导航拦截功能，例如：

router.beforeEach((to, from, next) => {
  // 在导航前执行操作
  if (/* 验证用户登录状态 */) {
    next()
  } else {
    next('/login') // 如果未登录，跳转到登录页
  }
})