vue左侧导航栏右侧显示内容
时间: 2023-09-29 22:03:11 浏览: 88
可以使用Vue的路由功能来实现左侧导航栏和右侧内容的联动显示。具体步骤如下:
1. 安装并引入Vue Router:
```
npm install vue-router --save
```
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
2. 配置路由:
```javascript
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
routes
})
```
这里配置了三个路由,分别对应左侧导航栏的三个选项。
3. 在页面中使用路由:
```html
<template>
<div>
<div class="left-nav">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
</div>
<div class="right-content">
<router-view></router-view>
</div>
</div>
</template>
```
`router-link` 用于生成左侧导航栏的链接,`router-view` 用于显示右侧的内容。
4. 运行程序,在左侧导航栏中点击不同的选项,右侧内容会对应地切换显示。
以上就是基于Vue Router实现左侧导航栏右侧显示内容的方法。