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-linkrouter-view来实现页面跳转。

Home.vue中:


About.vue中:


现在,当我们点击Go to About Page链接时,将会跳转到/about路径;当点击Go back to Home Page链接时,将会跳转回/路径。

希望对你有所帮助!

你可能感兴趣的:(vue.js,javascript,前端,vue)