Solve the problem of failure after using vue.js routing
Below I will share with you an article that solves the problem of failure after using vue.js routing. It has a good reference value and I hope it will be helpful to everyone.
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">培养信息</el-menu-item>
<el-menu-item index="3" class="nav3">考核相关</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="个人资料">
<!-- 路由链接添加处 -->
<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="会员资料">
<router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>会员信息</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>
<!-- 路由内容显示 -->
<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') //路由 启动应用
var Ctor = Vue.extend(Main)
new Ctor().$mount('#top-menu')
//主要就是下面这条语句多余 这是写组件时启动应用所用的语句
//new Ctor().$mount('#left-menu')
</script>
</html>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Instances of spirngmvc js passing complex json parameters to controller
##Vue.js form control operation summary
JS method of passing array parameters to the background controller
The above is the detailed content of Solve the problem of failure after using vue.js routing. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
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
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
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
How to use routing in ThinkPHP6
Jun 20, 2023 pm 07:54 PM
ThinkPHP6 is a powerful PHP framework with convenient routing functions that can easily implement URL routing configuration; at the same time, ThinkPHP6 also supports a variety of routing modes, such as GET, POST, PUT, DELETE, etc. This article will introduce how to use ThinkPHP6 for routing configuration. 1. ThinkPHP6 routing mode GET method: The GET method is a method used to obtain data and is often used for page display. In ThinkPHP6, you can use the following
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
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
How to use routing to customize page switching animation effects in a Vue project?
Jul 21, 2023 pm 02:37 PM
How to use routing to customize page switching animation effects in a Vue project? Introduction: In the Vue project, routing is one of the functions we often use. Switching between pages can be achieved through routing, providing a good user experience. In order to make page switching more vivid, we can achieve it by customizing animation effects. This article will introduce how to use routing to customize the page switching animation effect in the Vue project. Create a Vue project First, we need to create a Vue project. You can use VueCLI to quickly build
How to use routing to implement page jump in Vue?
Jul 21, 2023 am 08:33 AM
How to use routing to implement page jump in Vue? With the continuous development of front-end development technology, Vue.js has become one of the most popular front-end frameworks. In Vue development, page jump is an essential part. Vue provides VueRouter to manage application routing, and seamless switching between pages can be achieved through routing. This article will introduce how to use routing to implement page jumps in Vue, with code examples. First, install the vue-router plugin in the Vue project.
Tips for using route interceptors in uniapp
Dec 17, 2023 pm 04:30 PM
Tips for using route interceptors in uniapp In uniapp development, route interceptors are a very common function. Route interceptors allow us to perform some specific operations before routing jumps, such as permission verification, page passing parameters, etc. In this article, we will introduce the tips for using route interceptors in uniapp and provide specific code examples. Create a route interceptor First, we need to create a route interceptor in the uniapp project. The creation method is as follows: Create an inter in the project root directory
