How to deal with vue.js routing failure

This time I will bring you how to deal with vue.js routing failure, and what are the precautions for how to deal with vue.js routing failure. The following is a practical case, let's take a look.

I have newly learned the routing in vue.js and added a simple routing example ( from vue-router 2) to the vue demo I wrote before, but after adding the click only The address bar changes, but the content does not change. And some effects written before with jquery also fail. Finally, the reason was found because the same ID was launched twice (the first time was launched when using the vue component before, and the other one was Started during routing)

Attached is part of the 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="How to deal with vue.js routing failure" >
 </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>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

react native video to make full screen effect

Angular CLI Angular 5 practical project demonstration

The above is the detailed content of How to deal with vue.js routing failure. For more information, please follow other related articles on the PHP Chinese website!