So gehen Sie mit einem Routing-Fehler von vue.js um

Dieses Mal zeige ich Ihnen, wie Sie mit einem Routing-Fehler von vue.js umgehen und welche Vorsichtsmaßnahmen für den Umgang mit einem Routing-Fehler von vue.js gelten. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

Ich habe das Routing in vue.js neu gelernt und der Vue-Demo, die ich zuvor geschrieben habe, ein einfaches Routing-Beispiel hinzugefügt (von vue-router 2), aber nach dem Hinzufügen des Klicks nur noch Die Die Adressleiste ändert sich, aber der Inhalt ändert sich nicht. Und schließlich wurde der Grund dafür gefunden, dass dieselbe ID zweimal gestartet wurde (das erste Mal, als die Vue-Komponente verwendet wurde, und das andere Mal). einer wurde während des Routings gestartet)

Anbei ist ein Teil des Codes

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="So gehen Sie mit einem Routing-Fehler von vue.js um" >
 </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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Artikel. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

react+native+video erzeugt Vollbildeffekt

Angular CLI+Angular 5 praktische Projektdemonstration

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit einem Routing-Fehler von vue.js um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!