vue-router二级导航切换路由及高亮显示的实现方法

这里以网易云音乐作为示例，效果图： 我们先一层一层写导航 先设计第一层 1.设计导航页面样式 第一个导航页面为Discover Discover.vue： &lt;!-- --&gt; <template> <div> 发现 </div> </template> [removed] export default { name: "discover", data() { return { }; } }; [removed] &lt;style scoped&gt; &lt;/style&gt; 第二个导航页面为Mymusic 其余代码一样，注意要把name改为相应路由 name: "mymusic" 2 Vue Router 是 Vue.js 的官方路由管理器，它让我们能够实现前端路由，使应用程序可以在不同的视图之间导航，而无需刷新整个页面。在这个示例中，我们将看到如何在 Vue 应用中实现二级导航的路由切换以及高亮显示。 我们要创建导航页面的样式。在 `Discover.vue` 和 `Mymusic.vue` 文件中，我们定义了两个简单的组件，分别代表一级导航的“发现”和“我的音乐”页面。每个组件都有自己的 `name` 属性，这是 Vue Router 中用来识别路由的关键。 接着，我们需要在 `index.js` 中配置路由。这包括定义两个顶级路由，一个指向 `Discover` 组件，另一个指向 `Mymusic` 组件。每个路由包含 `path`、`name` 和 `component`，分别用于指定访问路径、路由名称和关联的组件。 为了实现导航，我们可以创建一个名为 `Guide.vue` 的组件，它包含一个导航条列表，列表项由 `v-for` 循环生成，并使用 `router-link` 组件创建链接。每个链接的 `to` 属性应与 `index.js` 中配置的路由 `path` 相匹配。 在 `Guide.vue` 的样式中，我们定义了一个 `.guide-active` 类来表示当前选中的导航项。当 `item.id` 等于 `guidecurrent` 变量时，这个类会被添加到对应的 `<li>` 元素上，从而实现高亮效果。`guidecurrent` 变量用于跟踪当前选中的导航项，初始值为 0，表示默认选中第一个选项。 对于二级导航，我们创建了 `Rank.vue` 和 `Recommend.vue` 两个组件，它们将作为 `Discover` 页面的子路由。在 `index.js` 中，我们为 `Discover` 路由添加了两个子路由，每个子路由都有自己的 `path` 和 `component`。这样，当用户点击一级导航的“发现”时，二级导航的页面就会根据路径进行切换。 在实际应用中，我们还需要处理路由切换时的逻辑，比如更新 `guidecurrent` 变量以反映当前选中的导航项，以及在二级导航中进行相应的操作。此外，可能还需要考虑动态加载和懒加载以优化性能，以及使用 `beforeRouteLeave` 或其他导航守卫来处理路由切换时的业务逻辑。 Vue Router 提供了一种灵活的方式来组织和管理 Vue 应用中的路由，使得导航变得简单直观。通过配置路由、创建导航组件和定义样式，我们可以实现具有二级导航和高亮效果的交互式菜单，提高用户体验。