解决使用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 指导方针
Apr 05 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 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调用c接口无错版介绍
2014/03/11 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python基于pygame实现图片代替鼠标移动效果
2015/11/11 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
招聘专员岗位职责
2014/03/07 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2014年招商工作总结
2014/11/22 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
初中家长评语和期望
2014/12/26 职场文书
贷款担保书
2015/01/20 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
创业计划书之美容店
2019/09/16 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers