```javascript
// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
在你的主文件（`main.js`）中引入并使用这个路由。
```javascript
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
第二步：定义横向导航的CSS样式
接下来，你需要在你的Vue组件中添加一些HTML来构建横向导航，并用CSS给它添加样式。