解决使用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 hashtable实现代码
Oct 13 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vue发送ajax请求详解
Oct 09 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
Vue 自定义指令功能完整实例
Sep 17 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数组操作
2011/12/30 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
jcrop基本参数一览
2013/07/16 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
Python Nose框架编写测试用例方法
2017/10/26 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
WxPython实现无边框界面
2019/11/18 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
打架检讨书100字
2014/01/19 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
个人作风建设自查报告
2014/10/22 职场文书
小学教育见习报告
2014/10/31 职场文书
英文邀请函
2015/02/02 职场文书
2015年大学社团工作总结
2015/04/09 职场文书