vue router 三级菜单
时间: 2023-09-17 15:15:03 浏览: 50
Vue Router 支持无限级嵌套路由,因此也支持三级菜单。
下面是一个简单的三级菜单的例子。
首先,定义路由配置:
```javascript
const routes = [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About,
children: [
{
path: '',
component: AboutHome,
},
{
path: 'team',
component: AboutTeam,
},
{
path: 'history',
component: AboutHistory,
},
],
},
{
path: '/contact',
component: Contact,
},
];
```
在这个路由配置中,`/about` 路径下有三个子路由:`/about`、`/about/team` 和 `/about/history`,分别对应 About 页面的主页、团队介绍和历史记录。
然后,在组件中使用 `router-link` 和 `router-view` 来实现菜单和内容的显示:
```html
<template>
<div>
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link>
<ul>
<li><router-link to="/about">Home</router-link></li>
<li><router-link to="/about/team">Team</router-link></li>
<li><router-link to="/about/history">History</router-link></li>
</ul>
</li>
<li><router-link to="/contact">Contact</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
```
这里使用了嵌套的 `router-link`,以实现三级菜单的展示。
最后,在根实例中配置路由:
```javascript
const router = new VueRouter({
routes,
});
const app = new Vue({
router,
}).$mount('#app');
```
这样就完成了三级菜单的配置和实现。