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
<!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">培養(yǎng)信息</el-menu-item> ?<el-menu-item index="3" class="nav3">考核相關(guān)</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="個(gè)人資料"> ?<!-- 路由鏈接添加處 --> ?<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="會(huì)員資料"> ?<router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>會(huì)員信息</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> <!-- 路由內(nèi)容顯示 --> <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')?//路由?啟動(dòng)應(yīng)用 ?var?Ctor?=?Vue.extend(Main) ?new?Ctor().$mount('#top-menu') ?//主要就是下面這條語句多余?這是寫組件時(shí)啟動(dòng)應(yīng)用所用的語句 ?//new?Ctor().$mount('#left-menu') ?</script> </html>
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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to implement API routing in the Slim framework Slim is a lightweight PHP micro-framework that provides a simple and flexible way to build web applications. One of the main features is the implementation of API routing, allowing us to map different requests to corresponding handlers. This article will introduce how to implement API routing in the Slim framework and provide some code examples. First, we need to install the Slim framework. The latest version of Slim can be installed through Composer. Open a terminal and

Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

Vue.js is not difficult to learn, especially for developers with a JavaScript foundation. 1) Its progressive design and responsive system simplify the development process. 2) Component-based development makes code management more efficient. 3) The usage examples show basic and advanced usage. 4) Common errors can be debugged through VueDevtools. 5) Performance optimization and best practices, such as using v-if/v-show and key attributes, can improve application efficiency.

Implementation method and experience summary of flexible configuration of routing rules in PHP Introduction: In Web development, routing rules are a very important part, which determines the corresponding relationship between URL and specific PHP scripts. In the traditional development method, we usually configure various URL rules in the routing file, and then map the URL to the corresponding script path. However, as the complexity of the project increases and business requirements change, it will become very cumbersome and inflexible if each URL needs to be configured manually. So, how to implement in PHP

In modern web applications, implementing web page navigation and routing is a very important part. Using JavaScript functions to implement this function can make our web applications more flexible, scalable and user-friendly. This article will introduce how to use JavaScript functions to implement web page navigation and routing, and provide specific code examples. Implementing web page navigation For a web application, web page navigation is the most frequently operated part by users. When a user clicks on the page

Uniapp is a cross-end framework based on Vue.js. It supports one-time writing and generates multi-end applications such as H5, mini programs, and APPs at the same time. It pays great attention to performance and development efficiency during the development process. In Uniapp, the dynamic addition and deletion of routes is a problem that is often encountered during the development process. Therefore, this article will introduce the dynamic addition and deletion of routes in Uniapp and provide specific code examples. 1. Dynamic addition of routes Dynamic addition of routes can be done according to actual needs when the page is loaded or after user operation.

Vue.js is mainly used for front-end development. 1) It is a lightweight and flexible JavaScript framework focused on building user interfaces and single-page applications. 2) The core of Vue.js is its responsive data system, and the view is automatically updated when the data changes. 3) It supports component development, and the UI can be split into independent and reusable components.
