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


Posted in Javascript onMarch 17, 2018

新学了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>
<div id="top-menu">
 <div class="logo">
 <img src="baidu.gif" alt="">
 </div>
 <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>
</div>
<div 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>
<!-- 路由内容显示 -->
<div class = "content">
 <router-view></router-view>
</div>
</div>
</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:'<div>foo</div>'}
 const List = {template:'<div>list</div>'}
 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>

以上这篇解决使用vue.js路由后失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 #Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 #Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 #Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
You might like
推荐php模板技术[转]
2007/01/04 PHP
也谈php网站在线人数统计
2008/04/09 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
利用原生JS实现data方法示例代码
2019/05/28 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
用matplotlib画等高线图详解
2017/12/14 Python
Python自定义线程类简单示例
2018/03/23 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Django 拆分model和view的实现方法
2019/08/16 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
最新大学生自我评价
2013/09/24 职场文书
物理教育专业毕业生推荐信
2013/11/03 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
教师个人自我剖析材料
2014/09/29 职场文书