解决使用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实现的网页局布刷新效果
Dec 01 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
初识Node.js
Sep 03 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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开发文件系统实例讲解
2006/10/09 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
解析link_mysql的php版
2013/06/30 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Fabric 应用案例
2016/08/28 Python
TensorFlow实现模型评估
2018/09/07 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python实现代码审查自动回复消息
2021/02/01 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
会计求职自荐信
2015/03/26 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
同学会感言
2015/07/30 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery