解决使用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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
常用的js方法合集
Mar 10 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
JS实现打字游戏
Dec 17 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
js实现扫雷源代码
Nov 27 Javascript
关于vue中如何监听数组变化
Apr 28 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 cron中的批处理
2008/09/16 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Python标准库笔记struct模块的使用
2018/02/22 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
10个Python小技巧你值得拥有
2018/09/29 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Jupyter加载文件的实现方法
2020/04/14 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
python cookie反爬处理的实现
2020/11/01 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
个人简历的自荐信
2013/10/23 职场文书
社会实践评语
2014/04/28 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
上班迟到检讨书
2015/05/06 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript
SQL使用复合索引实现数据库查询的优化
2022/05/25 SQL Server