解决使用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 单例/单体模式(Singleton)
Apr 07 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
军训自我鉴定100字
2014/02/13 职场文书
老师对学生的评语
2014/04/18 职场文书
房地产活动策划方案
2014/05/14 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年残联工作总结
2014/11/21 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android