这里以网易云音乐作为示例,效果图: 我们先一层一层写导航 先设计第一层 1.设计导航页面样式 第一个导航页面为Discover Discover.vue: <!-- --> <template> <div> 发现 </div> </template> [removed] export default { name: "discover", data() { return { }; } }; [removed] <style scoped> </style> 第二个导航页面为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 应用中的路由,使得导航变得简单直观。通过配置路由、创建导航组件和定义样式,我们可以实现具有二级导航和高亮效果的交互式菜单,提高用户体验。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/release/download_crawler_static/13610883/bg1.jpg)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 4
- 资源: 923
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)