Maison >interface Web >js tutoriel >Vue utilise un élément pour implémenter l'analyse de navigation
Cet article présente principalement l'analyse de l'utilisation d'un élément pour implémenter la navigation dans Vue. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
<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>
Utiliser l'élément dans. vue pour l'implémenter. La navigation doit prêter attention à trois aspects
Ajouter un routeur dans el-menu
Changement : default-active="$route.path"
L'itinéraire écrit directement dans l'attribut index en el. -menu-item
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Comment résoudre le problème de la mise en cache de fermeture de méthode dans les méthodes dans vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!