vue3路由跳转和获取

在Vue3中，路由跳转通常通过`router`对象及其提供的方法来完成。`vue-router`是一个常用的JavaScript库，它提供了一种声明式的方式来管理单页面应用（SPA）中的导航。以下是基本的操作：

1. **创建路由**: 首先需要在项目配置文件`router/index.js`中定义路由，例如：

import { createRouter, createWebHistory } from 'vue-router';
const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
];

const router = createRouter({
  history: createWebHistory(), // 使用web History API
  routes,
});

2. **导航到某个页面**:
- 使用`router.push(path)`动态导航到指定路径：

     router.push('/about');

- 或者使用组件内的导航守卫，如`beforeRouteEnter`或全局的`beforeEach`，来控制导航流程。

3. **获取当前路由信息**:
可以在组件生命周期钩子`mounted()`或计算属性中访问`this.$route`，它会包含当前路由的详细信息，包括`path`, `name`, `params`等。

export default {
  mounted() {
    console.log(this.$route); // 输出当前路由对象
  },
};