微客导航 » 文章资讯 » 解决使用vue.js路由后失效的问题

解决使用vue.js路由后失效的问题

2023-09-15 07:34:05 230

新学了vue.js中的路由在之前写的vue的demo上加上了简单的路由例子(来自vue-router2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的)

附上部分代码

基本资料培养信息考核相关清算

基本信息

修改密码

会员信息

小组信息

$(document).ready(function(){ $(".nav1").click(function(){ $(".bar1").show().siblings().hide(); }) $(".nav2").click(function(){ $(".bar2").show().siblings().hide(); }) $(".nav3").click(function(){ $(".bar3").show().siblings().hide(); }) }) //vue组件部分 varMain={ data(){ return{ activeIndex:'1' }; }, methods:{ handleSelect(key,keyPath){ /*console.log(key,keyPath);*/ } } } //vue路由部分 constInformation={template:'

foo

'} constList={template:'

list

'} constroutes=[ {path:'/information',component:Information}, {path:'/list',component:List}] constrouter=newVueRouter({ routes }) constapp=newVue({ router }).$mount('#left-menu')//路由启动应用 varCtor=Vue.extend(Main) newCtor().$mount('#top-menu') //主要就是下面这条语句多余这是写组件时启动应用所用的语句 //newCtor().$mount('#left-menu')

以上这篇解决使用vue.js路由后失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

解决使用vue.js路由后失效的问题

热门推荐

随机推荐