脚本宝典收集整理的这篇文章主要介绍了vue使用element实现导航的注意点,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<template>
<div 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>
<div class="line"></div>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: "1"
};
}
};
</script>
vue中使用element实现导航需要注意三个方面
在el-menu中添加 router
更改 :default-active="$route.path"
在el-menu-item中的index属性直接书写的路由
以上是脚本宝典为你收集整理的vue使用element实现导航的注意点全部内容,希望文章能够帮你解决vue使用element实现导航的注意点所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。