Comment gérer l'échec du routage vue.js
Cette fois, je vais vous montrer comment gérer l'échec de routage vue.js et quelles sont les précautions à prendre pour gérer l'échec de routage vue.js. Ce qui suit est un cas pratique, jetons un coup d'œil.
J'ai récemment appris le routage dans vue.js et j'ai ajouté un exemple de routage simple à la démo vue que j'ai écrite auparavant (à partir de vue-router 2), mais après avoir ajouté le clic uniquement L'adresse la barre change, mais le contenu ne change pas. Et certains effets écrits auparavant avec jquery échouent également. Finalement, la raison a été trouvée parce que le même ID a été lancé deux fois (la première fois a été lancée lors de l'utilisation du composant vue auparavant, et l'autre). a été démarré pendant le routage)
Ci-joint fait partie du code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >
</head>
<style>
body {
margin: 0;
padding: 0;
}
.logo {
width: 166.65px;
height: 60px;
position: absolute;
}
.el-menu-demo {
margin-left: 166.65px;
}
.tac {
width: 500px;
}
.bar2,.bar3{
display: none;
}
</style>
<body>
<p id="top-menu">
<p class="logo">
<img src="baidu.gif" alt="">
</p>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1" class="nav1">基本资料</el-menu-item>
<el-menu-item index="2" class="nav2">培养信息</el-menu-item>
<el-menu-item index="3" class="nav3">考核相关</el-menu-item>
<el-menu-item index="4" class="nav4">清算</el-menu-item>
</el-menu>
</p>
<p id="left-menu">
<el-row class="tac">
<!-- 基本资料-->
<el-col :span="8" class="bar1">
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" @select="handleSelect" theme="dark">
<el-menu-item-group title="个人资料">
<!-- 路由链接添加处 -->
<router-link to = "/information"><el-menu-item index="1"><i class="el-icon-message"></i>基本信息</el-menu-item></router-link>
<el-menu-item index="2"><i class="el-icon-message"></i>修改密码</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="会员资料">
<router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>会员信息</el-menu-item></router-link>
</el-menu-item-group>
<el-menu-item-group title="小组资料">
<el-menu-item index="4"><i class="el-icon-message"></i>小组信息</el-menu-item>
</el-menu-item-group>
</el-menu>
</el-col>
</el-row>
<!-- 路由内容显示 -->
<p class = "content">
<router-view></router-view>
</p>
</p>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav1").click(function(){
$(".bar1").show().siblings().hide();
})
$(".nav2").click(function(){
$(".bar2").show().siblings().hide();
})
$(".nav3").click(function(){
$(".bar3").show().siblings().hide();
})
})
</script>
<script type="text/javascript">
//vue组件部分
var Main = {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
/*console.log(key, keyPath);*/
}
}
}
//vue路由部分
const Information = {template:'<p>foo</p>'}
const List = {template:'<p>list</p>'}
const routes = [
{path:'/information',component:Information},
{path:'/list',component:List}]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#left-menu') //路由 启动应用
var Ctor = Vue.extend(Main)
new Ctor().$mount('#top-menu')
//主要就是下面这条语句多余 这是写组件时启动应用所用的语句
//new Ctor().$mount('#left-menu')
</script>
</html>Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus excitant. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
react+native+video crée un effet plein écran
Démonstration pratique du projet Angular CLI+Angular 5
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment implémenter le routage API dans le framework Slim
Aug 02, 2023 pm 05:13 PM
Comment implémenter le routage API dans le framework Slim Slim est un micro-framework PHP léger qui offre un moyen simple et flexible de créer des applications Web. L'une des principales fonctionnalités est la mise en œuvre du routage API, nous permettant de mapper différentes requêtes aux gestionnaires correspondants. Cet article présentera comment implémenter le routage API dans le framework Slim et fournira quelques exemples de code. Tout d’abord, nous devons installer le framework Slim. La dernière version de Slim peut être installée via Composer. Ouvrez un terminal et
Java Apache Camel : Construire une architecture orientée services flexible et efficace
Feb 19, 2024 pm 04:12 PM
Apache Camel est un framework d'intégration basé sur Enterprise Service Bus (ESB) qui peut facilement intégrer des applications, des services et des sources de données disparates pour automatiser des processus métier complexes. ApacheCamel utilise une configuration basée sur les routes pour définir et gérer facilement les processus d'intégration. Les principales fonctionnalités d'ApacheCamel incluent : Flexibilité : ApacheCamel peut être facilement intégré à une variété d'applications, de services et de sources de données. Il prend en charge plusieurs protocoles, notamment HTTP, JMS, SOAP, FTP, etc. Efficacité : ApacheCamel est très efficace, il peut gérer un grand nombre de messages. Il utilise un mécanisme de messagerie asynchrone, qui améliore les performances. Extensible
Utiliser les fonctions JavaScript pour implémenter la navigation et le routage des pages Web
Nov 04, 2023 am 09:46 AM
Dans les applications Web modernes, la mise en œuvre de la navigation et du routage des pages Web est un élément très important. L'utilisation de fonctions JavaScript pour implémenter cette fonction peut rendre nos applications Web plus flexibles, évolutives et conviviales. Cet article explique comment utiliser les fonctions JavaScript pour implémenter la navigation et le routage des pages Web, et fournit des exemples de code spécifiques. Implémentation de la navigation Web Pour une application Web, la navigation Web est la partie la plus fréquemment utilisée par les utilisateurs. Lorsqu'un utilisateur clique sur la page
Comment utiliser le routage dans ThinkPHP6
Jun 20, 2023 pm 07:54 PM
ThinkPHP6 est un framework PHP puissant doté de fonctions de routage pratiques qui peuvent facilement implémenter la configuration du routage d'URL. En même temps, ThinkPHP6 prend également en charge plusieurs modes de routage, tels que GET, POST, PUT, DELETE, etc. Cet article explique comment utiliser ThinkPHP6 pour la configuration du routage. 1. Méthode GET du mode de routage ThinkPHP6 : La méthode GET est une méthode utilisée pour obtenir des données et est souvent utilisée pour l'affichage des pages. Dans ThinkPHP6, vous pouvez utiliser ce qui suit
Méthode de mise en œuvre et résumé de l'expérience de configuration flexible des règles de routage en PHP
Oct 15, 2023 pm 03:43 PM
Méthode de mise en œuvre et résumé de l'expérience de la configuration flexible des règles de routage en PHP Introduction : Dans le développement Web, les règles de routage sont une partie très importante, qui détermine la relation correspondante entre l'URL et les scripts PHP spécifiques. Dans la méthode de développement traditionnelle, nous configurons généralement diverses règles d'URL dans le fichier de routage, puis mappons l'URL sur le chemin de script correspondant. Cependant, à mesure que la complexité du projet augmente et que les exigences commerciales changent, il deviendra très lourd et peu flexible si chaque URL doit être configurée manuellement. Alors, comment implémenter en PHP
Comment utiliser le routage pour personnaliser les effets d'animation de changement de page dans un projet Vue ?
Jul 21, 2023 pm 02:37 PM
Comment utiliser le routage pour personnaliser les effets d'animation de changement de page dans un projet Vue ? Introduction : Dans le projet Vue, le routage est l'une des fonctions que nous utilisons souvent. La commutation entre les pages peut être réalisée via le routage, offrant une bonne expérience utilisateur. Afin de rendre le changement de page plus vivant, nous pouvons y parvenir en personnalisant les effets d'animation. Cet article explique comment utiliser le routage pour personnaliser l'effet d'animation de changement de page dans le projet Vue. Créer un projet Vue Tout d'abord, nous devons créer un projet Vue. Vous pouvez utiliser VueCLI pour créer rapidement
Conseils pour utiliser les intercepteurs de route dans Uniapp
Dec 17, 2023 pm 04:30 PM
Conseils pour utiliser les intercepteurs de route dans uniapp Dans le développement d'uniapp, les intercepteurs de route sont une fonction très courante. Les intercepteurs de route nous permettent d'effectuer certaines opérations spécifiques avant les sauts de route, telles que la vérification des autorisations, les paramètres de passage de page, etc. Dans cet article, nous présenterons les conseils d'utilisation des intercepteurs de route dans uniapp et fournirons des exemples de code spécifiques. Créer un intercepteur de route Tout d'abord, nous devons créer un intercepteur de route dans le projet uniapp. La méthode de création est la suivante : Créer un inter dans le répertoire racine du projet
Comment utiliser le routage pour implémenter le saut de page dans Vue ?
Jul 21, 2023 am 08:33 AM
Comment utiliser le routage pour implémenter le saut de page dans Vue ? Avec le développement continu de la technologie de développement front-end, Vue.js est devenu l'un des frameworks front-end les plus populaires. Dans le développement de Vue, le saut de page est un élément essentiel. Vue fournit VueRouter pour gérer le routage des applications, et une commutation transparente entre les pages peut être obtenue grâce au routage. Cet article expliquera comment utiliser le routage pour implémenter les sauts de page dans Vue, avec des exemples de code. Tout d'abord, installez le plugin vue-router dans le projet Vue.
