vue3实现页面跳转
在Vue 3中，可以使用router来实现页面跳转。下面是一个简单的示例代码：
首先，安装vue-router库：
npm install vue-router@next
然后，在main.js中配置路由：
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp(App)
app.use(router)
app.mount('#app')
在上面的代码中，我们定义了两个路由：/对应Home组件，/about对应About组件。
接下来，我们可以在组件中使用router-link和router-view来实现页面跳转。
在Home.vue中：
<template>
<div>
<h1>Home Page</h1>
<router-link to="/about">Go to About Page</router-link>
</div>
</template>
在About.vue中：
<template>
<div>
<h1>About Page</h1>
<router-link to="/">Go back to Home Page</router-link>
</div>
</template>
现在，当我们点击Go to About Page链接时，将会跳转到/about路径；当点击Go back to Home Page链接时，将会跳转回/路径。
希望对你有所帮助！
原文地址：https://blog.csdn.net/m0_74801194/article/details/136376245
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！