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

nbsp;html>


 <meta>
 <!-- 引入样式 -->
 <link>

<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>

<p>
 </p><p>
 <img  src="/static/imghwm/default1.png" data-src="baidu.gif" class="lazy" alt="Comment gérer l'échec du routage vue.js" >
 </p>
 <el-menu>
 <el-menu-item>基本资料</el-menu-item>
 <el-menu-item>培养信息</el-menu-item>
 <el-menu-item>考核相关</el-menu-item>
 <el-menu-item>清算</el-menu-item>
 </el-menu>

<p>
<el-row>
 <!-- 基本资料-->
 <el-col>
 <el-menu>
 <el-menu-item-group>
 <!-- 路由链接添加处 -->
 <router-link><el-menu-item><i></i>基本信息</el-menu-item></router-link>
 <el-menu-item><i></i>修改密码</el-menu-item>
 </el-menu-item-group>
 <el-menu-item-group>
 <router-link><el-menu-item><i></i>会员信息</el-menu-item></router-link>
 </el-menu-item-group>
 <el-menu-item-group>
 <el-menu-item><i></i>小组信息</el-menu-item>
 </el-menu-item-group>
 </el-menu>
 </el-col>
 </el-row>
<!-- 路由内容显示 -->
</p><p>
 <router-view></router-view>
</p>


 <!-- 先引入 Vue -->
 <script></script>
 <script></script>
 <!-- 引入组件库 -->
 <script></script>
 <script></script>
<script>
 $(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>
//vue组件部分
 var Main = {
 data() {
 return {
  activeIndex: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;<p>foo&#39;}
 const List = {template:&#39;<p>list&#39;}
 const routes = [
 {path:&#39;/information&#39;,component:Information},
 {path:&#39;/list&#39;,component:List}]
 const router = new VueRouter({
 routes
 })
 const app = new Vue({
 router
 }).$mount(&#39;#left-menu&#39;) //路由 启动应用
 var Ctor = Vue.extend(Main)
 new Ctor().$mount(&#39;#top-menu&#39;)
 //主要就是下面这条语句多余 这是写组件时启动应用所用的语句
 //new Ctor().$mount(&#39;#left-menu&#39;)
 </script>

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!