关灯
开启左侧

vue.js路由失效如何处理

[复制链接]
老蚊子 发表于 2019-1-23 09:11:42 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
这次给大家带来vue.js路由失效如何处理,vue.js路由失效如何处理的注意事项有哪些,下面就是实战案例,一起来看一下。


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



  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <!-- 引入样式 -->

  6. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >

  7. </head>

  8. <style>

  9. body {

  10. margin: 0;

  11. padding: 0;

  12. }

  13. .logo {

  14. width: 166.65px;

  15. height: 60px;

  16. position: absolute;

  17. }

  18. .el-menu-demo {

  19. margin-left: 166.65px;

  20. }

  21. .tac {

  22. width: 500px;

  23. }

  24. .bar2,.bar3{

  25. display: none;

  26. }

  27. </style>

  28. <body>

  29. <p id="top-menu">

  30. <p class="logo">

  31. <img src="baidu.gif" alt="">

  32. </p>

  33. <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">

  34. <el-menu-item index="1" class="nav1">基本资料</el-menu-item>

  35. <el-menu-item index="2" class="nav2">培养信息</el-menu-item>

  36. <el-menu-item index="3" class="nav3">考核相关</el-menu-item>

  37. <el-menu-item index="4" class="nav4">清算</el-menu-item>

  38. </el-menu>

  39. </p>

  40. <p id="left-menu">

  41. <el-row class="tac">

  42. <!-- 基本资料-->

  43. <el-col :span="8" class="bar1">

  44. <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" @select="handleSelect" theme="dark">

  45. <el-menu-item-group title="个人资料">

  46. <!-- 路由链接添加处 -->

  47. <router-link to = "/information"><el-menu-item index="1"><i class="el-icon-message"></i>基本信息</el-menu-item></router-link>

  48. <el-menu-item index="2"><i class="el-icon-message"></i>修改密码</el-menu-item>

  49. </el-menu-item-group>

  50. <el-menu-item-group title="会员资料">

  51. <router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>会员信息</el-menu-item></router-link>

  52. </el-menu-item-group>

  53. <el-menu-item-group title="小组资料">

  54. <el-menu-item index="4"><i class="el-icon-message"></i>小组信息</el-menu-item>

  55. </el-menu-item-group>

  56. </el-menu>

  57. </el-col>

  58. </el-row>

  59. <!-- 路由内容显示 -->

  60. <p class = "content">

  61. <router-view></router-view>

  62. </p>

  63. </p>

  64. </body>

  65. <!-- 先引入 Vue -->

  66. <script src="https://unpkg.com/vue/dist/vue.js"></script>

  67. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

  68. <!-- 引入组件库 -->

  69. <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  70. <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  71. <script type="text/javascript">

  72. $(document).ready(function(){

  73. $(".nav1").click(function(){

  74. $(".bar1").show().siblings().hide();

  75. })

  76. $(".nav2").click(function(){

  77. $(".bar2").show().siblings().hide();

  78. })

  79. $(".nav3").click(function(){

  80. $(".bar3").show().siblings().hide();

  81. })

  82. })

  83. </script>

  84. <script type="text/javascript">

  85. //vue组件部分

  86. var Main = {

  87. data() {

  88. return {

  89.   activeIndex: '1'

  90. };

  91. },

  92. methods: {

  93. handleSelect(key, keyPath) {

  94.   /*console.log(key, keyPath);*/

  95. }

  96. }

  97. }

  98. //vue路由部分

  99. const Information = {template:'<p>foo</p>'}

  100. const List = {template:'<p>list</p>'}

  101. const routes = [

  102. {path:'/information',component:Information},

  103. {path:'/list',component:List}]

  104. const router = new VueRouter({

  105. routes

  106. })

  107. const app = new Vue({

  108. router

  109. }).$mount('#left-menu') //路由 启动应用

  110. var Ctor = Vue.extend(Main)

  111. new Ctor().$mount('#top-menu')

  112. //主要就是下面这条语句多余 这是写组件时启动应用所用的语句

  113. //new Ctor().$mount('#left-menu')

  114. </script>

  115. </html>
复制代码
以上就是vue.js路由失效如何处理的详细内容
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

13粉丝

75帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )