vue3.0 页面跳转实现

在Vue 3.0中，页面跳转可以通过使用Vue Router来实现。Vue Router是Vue.js官方的路由管理器，它可以帮助我们实现单页应用的页面跳转和导航。

首先，你需要安装Vue Router。可以通过npm或者yarn来安装：

npm install vue-router

或者

yarn add vue-router

安装完成后，在你的Vue项目中，创建一个router.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(),
  routes
});

export default router;

在上面的代码中，我们定义了两个路由：'/'对应Home组件，'/about'对应About组件。

然后，在你的main.js文件中，将router.js引入，并将其挂载到Vue实例上：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

现在，你可以在你的组件中使用`<router-link>`标签来实现页面跳转。例如，在App.vue组件中：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

`<router-link>`标签会渲染成一个a标签，点击它会触发路由跳转。

另外，你也可以使用编程式导航来实现页面跳转。例如，在某个按钮的点击事件中，你可以使用`$router.push()`方法来进行跳转：

methods: {
  goToAbout() {
    this.$router.push('/about');
  }
}

这样就可以实现页面跳转了。