时间:2021-07-01 10:21:17 帮助过:3人阅读
<template> <p class="app"> <el-header> <el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="/Help">帮助</el-menu-item> <el-menu-item index="/Central-summary">中心概括</el-menu-item> <el-menu-item index="/Flying-Eagle-Academy">飞鹰学苑</el-menu-item> <el-menu-item index="/Strategy-comparison">策略对比</el-menu-item> <el-menu-item index="/Strategy-backtest">策略回测</el-menu-item> <el-menu-item index="/Combined-configuration">组合配置</el-menu-item> </el-menu> <p class="line"></p> </el-header> <el-main> <router-view></router-view> </el-main> </p> </template> <script> export default { data() { return { activeIndex: "1" }; } }; </script>
vue中使用element实现导航需要注意三个方面
在el-menu中添加 router
更改 :default-active="$route.path"
在el-menu-item中的index属性直接书写的路由
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
如何解决vue中methods中的方法闭包缓存的问题
以上就是vue使用element实现导航的分析的详细内容,更多请关注Gxl网其它相关文章!