在vue3中实现页面跳转后还有导航栏如何解决
时间: 2024-02-01 15:13:55 浏览: 33
在Vue3中,可以使用Vue Router来实现页面跳转和导航栏的功能。
首先,在你的Vue项目中安装Vue Router:
```
npm install vue-router --save
```
然后,在你的Vue组件中,导入Vue Router并创建一个路由对象:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
```
在上面的代码中,我们定义了两个路由:一个是指向根路径 `/` 的Home组件,另一个是指向 `/about` 路径的About组件。
然后,在你的Vue模板中,使用 `<router-link>` 组件来实现导航栏:
```html
<template>
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view />
</div>
</template>
```
在上面的代码中,我们使用了 `<router-link>` 组件来实现导航栏,其中 `to` 属性指定了要跳转的路径。
最后,在你的Vue实例中,将路由对象添加到Vue实例中:
```javascript
const app = createApp(App)
app.use(router)
app.mount('#app')
```
这样,你就可以在Vue3中实现页面跳转和导航栏的功能了。