解决使用vue.js路由后失效的问题-js教程-PHP中文网

首页

web前端

js教程

解决使用vue.js路由后失效的问题

亚连

May 29, 2018 pm 03:51 PM

vue.js 路由

下面我就为大家分享一篇解决使用vue.js路由后失效的问题，具有很好的参考价值，希望对大家有所帮助。

新学了vue.js中的路由在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的)

附上部分代码

<!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: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;<p>foo</p>&#39;}
 const List = {template:&#39;<p>list</p>&#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>
</html>

登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

spirngmvc js传递复杂json参数到controller的实例

Vue.js 表单控件操作小结

js传递数组参数到后台controller的方法

以上是解决使用vue.js路由后失效的问题的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7554

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

在Slim框架中实现API路由的方法 Aug 02, 2023 pm 05:13 PM

在Slim框架中实现API路由的方法Slim是一款轻量级的PHP微型框架，它提供了一个简单而灵活的方式来构建Web应用程序。其中一个主要功能是实现API路由，使我们能够将不同的请求映射到相应的处理程序。本文将介绍如何在Slim框架中实现API路由，并提供一些代码示例。首先，我们需要安装Slim框架。可以通过Composer来安装最新版本的Slim。打开终端并

Java Apache Camel：打造灵活而高效的面向服务体系架构 Feb 19, 2024 pm 04:12 PM

ApacheCamel是一个基于企业服务总线(ESB)的集成框架，它可以轻松地将不同的应用程序、服务和数据源集成在一起，从而实现复杂的业务流程自动化。ApacheCamel使用基于路由的配置方式，可以轻松地定义和管理集成流程。ApacheCamel的主要特点包括：灵活性：ApacheCamel可以轻松地与各种应用程序、服务和数据源集成。它支持多种协议，包括Http、JMS、SOAP、FTP等。高效性：ApacheCamel非常高效，它可以处理大量的消息。它使用异步消息传递机制，可以提高性能。可扩

如何在ThinkPHP6中使用路由 Jun 20, 2023 pm 07:54 PM

ThinkPHP6是一款强大的PHP框架，拥有便捷的路由功能，可以轻松实现URL路由配置；同时，ThinkPHP6还支持多种路由模式，如GET、POST、PUT、DELETE等等。本文将介绍如何使用ThinkPHP6进行路由配置。一、ThinkPHP6路由模式GET方式：GET方式是用于获取数据的一种方式，常用于页面展示。在ThinkPHP6中，可以使用如下

如何在Vue项目中使用路由实现页面切换动画效果的定制？ Jul 21, 2023 pm 02:37 PM

如何在Vue项目中使用路由实现页面切换动画效果的定制？引言：在Vue项目中，路由是我们经常使用的功能之一。通过路由可以实现页面之间的切换，提供了良好的用户体验。而为了让页面切换更加生动，我们可以通过定制动画效果实现。本文将介绍如何在Vue项目中使用路由实现页面切换动画效果的定制。创建Vue项目首先，我们需要创建一个Vue项目。可以使用VueCLI来快速搭建

PHP中灵活配置路由规则的实现方法和经验总结 Oct 15, 2023 pm 03:43 PM

PHP中灵活配置路由规则的实现方法和经验总结引言：在Web开发中，路由规则是非常重要的一部分，它决定了URL与具体的PHP脚本的对应关系。在传统的开发方式中，我们通常会在路由文件中配置各种URL规则，然后将URL与对应的脚本路径进行映射。但是，随着项目的复杂度增加和业务需求的变化，如果每个URL都需要手动配置，将会变得非常麻烦和不灵活。那么，在PHP中如何实

使用JavaScript函数实现网页导航和路由 Nov 04, 2023 am 09:46 AM

在现代Web应用程序中，实现网页导航和路由是十分重要的一环。利用JavaScript的函数来实现这个功能，可以使我们的Web应用程序更加灵活、可扩展和用户友好。本文将介绍如何使用JavaScript函数来实现网页导航和路由，并提供具体的代码示例。实现网页导航对于一个Web应用程序而言，网页导航是用户操作最频繁的一个部分。当用户点击页面上的

如何在Vue中使用路由实现页面跳转？ Jul 21, 2023 am 08:33 AM

如何在Vue中使用路由实现页面跳转？随着前端开发技术的不断发展，Vue.js已经成为了目前最热门的前端框架之一。而在Vue开发中，实现页面跳转是必不可少的一部分。Vue提供了VueRouter来管理应用的路由，通过路由可以实现页面之间的无缝切换。本文将介绍如何在Vue中使用路由实现页面跳转，并附有代码示例。首先，在Vue项目中安装vue-router插件。

uniapp中路由的动态添加与删除方法 Dec 17, 2023 pm 02:55 PM

Uniapp是一个基于Vue.js的跨端框架，支持一次编写，同时生成H5、小程序、APP等多端应用，并且在开发过程中十分注重性能和开发效率。在Uniapp中，路由的动态添加与删除是开发过程中经常会遇到的问题，因此本文将介绍Uniapp中路由的动态添加与删除方法，并提供具体的代码示例。一、路由动态添加动态添加路由，可以根据实际需求，在页面加载时或者用户操作后，

See all articles

解决使用vue.js路由后失效的问题

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题