vue 侧边导航怎么引用动态router
时间: 2023-08-23 10:33:19 浏览: 32
如果你想在 Vue 侧边导航组件中引用动态路由,可以使用 Vue Router 中提供的 `$route` 对象来获取当前路由信息,然后动态生成侧边导航。
具体的实现步骤如下:
1. 在侧边导航组件中,使用 `$route.matched` 属性获取当前路由匹配的所有路由记录。
2. 遍历 `$route.matched` 数组,生成对应的侧边导航菜单项。
3. 在生成菜单项时,可以根据路由记录中的 `meta` 属性来设置菜单项的图标、标题等内容。
4. 为每个菜单项添加 `router-link` 组件,使用户可以点击菜单项跳转到对应的路由页面。
下面是一个简单的示例代码:
```vue
<template>
<div>
<ul>
<li v-for="route in $route.matched" :key="route.path">
<router-link :to="route.path">
<i :class="route.meta.icon"></i>
{{ route.meta.title }}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Sidebar',
};
</script>
```
在上面的代码中,我们使用 `$route.matched` 属性获取当前路由匹配的所有路由记录,并使用 `v-for` 指令遍历这些记录生成侧边导航菜单项。在菜单项中,我们使用 `router-link` 组件来创建链接,并根据路由记录中的 `meta` 属性来设置菜单项的图标和标题。