<big id="iroev"><tbody id="iroev"></tbody></big>
  1. \n\n?\n?\n?<\/p>\n?\n?基本資料<\/el-menu-item>\n?培養(yǎng)信息<\/el-menu-item>\n?考核相關(guān)<\/el-menu-item>\n?清算<\/el-menu-item>\n?<\/el-menu>\n<\/p>\n\n\n?\n?\n?\n?\n?\n?<\/i>基本信息<\/el-menu-item><\/router-link>\n?<\/i>修改密碼<\/el-menu-item>\n?<\/el-menu-item-group>\n?\n?<\/i>會(huì)員信息<\/el-menu-item><\/router-link>\n?<\/el-menu-item-group>\n?\n?<\/i>小組信息<\/el-menu-item>\n?<\/el-menu-item-group>\n?<\/el-menu>\n?<\/el-col>\n?<\/el-row>\n\n\n?<\/router-view>\n<\/p>\n<\/p>\n<\/body>\n?\n?
    	
    
    
    
    
    
    
    

    国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

    Home Web Front-end JS Tutorial How to deal with vue.js routing failure

    How to deal with vue.js routing failure

    Jun 15, 2018 pm 03:55 PM
    vue.js routing

    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!

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

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

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    How to implement API routing in the Slim framework How to implement API routing in the Slim framework Aug 02, 2023 pm 05:13 PM

    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 vs. React: Project-Specific Considerations Vue.js vs. React: Project-Specific Considerations Apr 09, 2025 am 12:01 AM

    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.

    Java Apache Camel: Building a flexible and efficient service-oriented architecture Java Apache Camel: Building a flexible and efficient service-oriented architecture Feb 19, 2024 pm 04:12 PM

    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

    Is vue.js hard to learn? Is vue.js hard to learn? Apr 04, 2025 am 12:02 AM

    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 flexibly configuring routing rules in PHP Implementation method and experience summary of flexibly configuring routing rules in PHP Oct 15, 2023 pm 03:43 PM

    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

    Use JavaScript functions to implement web page navigation and routing Use JavaScript functions to implement web page navigation and routing Nov 04, 2023 am 09:46 AM

    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

    Dynamic addition and deletion methods of routes in uniapp Dynamic addition and deletion methods of routes in uniapp Dec 17, 2023 pm 02:55 PM

    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.

    Is Vue used for frontend or backend? Is Vue used for frontend or backend? Apr 03, 2025 am 12:07 AM

    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.

    See all articles