使用vue.js路由后失效

新学了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"></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路由后失效相关推荐

vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...
使用vue.js路由踩到的一个坑Unknown custom element
在配合require.js使用vue路由的时候,遇到了路由组件报错: "vue.js:597 [Vue warn]: Unknown custom element: <router-l ...
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
基于vue-router的案例感觉好多,啊啊啊!!! 实现效果实现步骤抽离并渲染App根组件将左侧菜单改造为路由链接创建左侧菜单对应的路由组件在右侧主体区域添加路由占位符添加子路由规则 ...
[Vue.js] 路由 -- 前端路由
路由的基本概念与原理路由本质是对应关系后端路由概念 : 根据不同的用户URL请求,返回不同的内容本质 : URL请求地址与服务器资源之间的对应关系 SPA 后端渲染(存在性能问题) Ajax ...
删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...
问题由于这次项目是在初学 Vue 之后的第一个正式项目,没有考虑到类似路由懒加载. 按需加载的问题 ,所以呢,也算是没经验. 到了这些天,项目写得差不多了,准备放到服务器测试,才发现这个问题. 优 ...
vue.js 发布后路径引用问题
但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到错误如下打开index.html文件发现里面引用的文件路径不对这里只需要更改config/ ...
Vue设置路由后页面仍不显示为空白
问题现象设置了路由,新增的页面的页面依然显示空白,没有任何报错. 问题原因与解决办法出现这个问题只能说明路径或配置写错了. 第一步:检查配置:router/index.js中的routes不要写成 ...
vue动画打包后失效问题的解决办法
webpack 打包后动画未执行,或动画生效方式异常解决: 找到build文件夹中的vue-loader.conf.js,把extract的值改为false vue-loader.conf.js 关 ...

使用vue.js路由后失效

使用vue.js路由后失效相关推荐

最新文章

热门文章