vue3路由跳转方式以及区别

Vue 3 中的路由跳转方式与 Vue 2 有一些区别。在 Vue 2 中，我们通常使用 Vue Router 插件来进行路由管理，而在 Vue 3 中，Vue Router 已经成为了官方的一部分。

在 Vue 3 中，我们可以使用 `createRouter` 函数来创建路由实例，并通过 `use` 函数将其挂载到根组件上。以下是一个简单的示例：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

createApp(App).use(router).mount('#app');

在上面的示例中，我们通过 `createRouter` 函数创建了一个路由实例，并使用 `createWebHistory` 创建了一个基于浏览器历史记录的路由模式。然后，我们定义了两个路由规则，分别对应根路径和 `/about` 路径，并指定了对应的组件。

要进行路由跳转，可以使用 `router.push` 方法。例如，在组件中使用 `router.push('/about')` 可以跳转到 `/about` 路径。此外，还可以使用 `<router-link>` 组件来生成带有正确路径的链接。

需要注意的是，在 Vue 3 中，不再需要通过 `$router` 和 `$route` 来访问路由实例和当前路由信息。可以直接在组件中使用 `router` 和 `route` 对象来进行相应操作。

总结一下，Vue 3 中的路由跳转方式与 Vue 2 有所不同，需要使用 `createRouter` 函数创建路由实例，并使用 `router.push` 方法进行跳转。同时，也可以使用 `<router-link>` 组件来生成链接。