vue实现侧边的路由导航
时间: 2023-06-29 16:06:52 浏览: 62
Vue 可以通过使用 Vue Router 实现侧边的路由导航。以下是实现步骤:
1. 首先需要安装 Vue Router,可以通过以下命令进行安装:
```
npm install vue-router --save
```
2. 在 main.js 中引入 Vue Router 并使用:
```
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home
},
{
path: '/about',
component: About
}
]
})
new Vue({
el: '#app',
router,
render: h => h(App)
})
```
3. 在 App.vue 中创建侧边栏组件并添加路由链接:
```
<template>
<div id="app">
<div class="sidebar">
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<style>
.sidebar {
width: 200px;
height: 100%;
background-color: #f0f0f0;
float: left;
}
.content {
width: calc(100% - 200px);
height: 100%;
float: left;
}
</style>
```
4. 创建路由对应的组件:
```
<template>
<div>
<h2>Home</h2>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
```
```
<template>
<div>
<h2>About</h2>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
```
这样,就可以实现一个简单的侧边栏路由导航了。