用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧:

  • 测试部抛出问题一:在Vue1.0路由vue-router中,当点击菜单一个组件加载出来表格列表,输入查询条件查询,当在单击这个菜单后表格的数据没有重置查询条件和查询结果.

原因分析:Vue路由在页面渲染一个组件后加载后,再加载这个组件,组件不会摧毁后在重新生成这个组件,不会重新触发组件的生命周期中的方法.代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.  
  7. <title>learning vue</title>
  8. </head>
  9. <body>
  10.  
  11. <div id="app-container">
  12. <ul>
  13. <li v-for="item in $root.list">
  14. <a v-link="{ path: '/lang/' + item.id }">{{ item.name }}{{para}}{{params}}</a>
  15. </li>
  16. </ul>
  17. <router-view :params="params"></router-view>
  18. </div>
  19.  
  20. <script src="js/vue.js"></script>
  21. <script src="js/vue-router.js"></script>
  22.  
  23. <script>
  24. Vue.config.debug = true;
  25. Vue.use(VueRouter);
  26. var AppComponent = Vue.extend({
  27. data: function(){
  28. return {
  29. params:111,
  30. list: [
  31. { id: '10001', name: 'C#', message: 'Hello C#' },
  32. { id: '10002', name: 'Java', message: 'Hello Java.' },
  33. { id: '10003', name: 'C++', message: 'Hello C++' },
  34. { id: '10004', name: 'JavaScript', message: 'Hello JavaScript' }
  35. ]
  36. };
  37. }
  38. });
  39. var LangDetailComponent = Vue.extend({
  40. template: `<div><h1>{{ model.name }}</h1><p>{{ model.message }}</p></div>`,
  41. computed: {
  42. model: function(){
  43. var list = this.$root.list;
  44. var id = this.$route.params.id;
  45. for(var i = 0; i < list.length; i++){
  46. if(list[i].id === id){
  47. return list[i];
  48. }
  49. }
  50. }
  51. },
  52. init:function () {
  53. alert("init");
  54. },
  55. created:function () {
  56. alert("created");
  57. },
  58. beforeCompile:function () {
  59. alert("beforeCompile");
  60. },
  61. compiled:function () {
  62. alert("compiled");
  63. },
  64. ready:function () {
  65. alert("ready");
  66. },
  67. attached:function () {
  68. alert("attached")
  69. },
  70. detached:function () {
  71. alert("detached")
  72. },
  73. beforeDestroy:function () {
  74. alert("beforeDestroy")
  75. },
  76. destroyed:function () {
  77. alert("destroyed")
  78. }
  79.  
  80. });
  81.  
  82. var router = new VueRouter();
  83. router.map({
  84. '/lang/:id': { component: LangDetailComponent }
  85.  
  86. });
  87. router.start(AppComponent, '#app-container');
  88. </script>
  89.  
  90. </body>
  91. </html>

执行效果:

着三个路由都是同一个组件,但点击其他的时候组件中的所有生命周期的方法都没有调用,去vue-router的api上看没有找到重新加载路由的配置配置项.

在实际开发中这个问题在两个菜单共用一个组件,设置传参来判断加载不同的数据的情况下,会出现另一个ready方法不走导致数据显示不真确.解决思路可以加监听路由地址触发ready事件.

而上面的解决方法是用v-if来重新加载组件,代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.  
  7. <title>learning vue</title>
  8. </head>
  9. <body>
  10.  
  11. <div id="app-container">
  12. <ul>
  13. <li v-for="item in $root.list">
  14. <a href="javascript:void(0)" @click="click(item.path)">{{ item.name }}</a>
  15. </li>
  16. </ul>
  17. <router-view v-if="show"></router-view>
  18. </div>
  19.  
  20. <script src="js/vue.js"></script>
  21. <script src="js/vue-router.js"></script>
  22.  
  23. <script>
  24. Vue.config.debug = true;
  25. Vue.use(VueRouter);
  26. var AppComponent = Vue.extend({
  27. data: function(){
  28. return {
  29. show:true,
  30. list: [
  31. { id: '10001', name: 'C#', message: 'Hello C#',path:"/lan"},
  32. { id: '10002', name: 'Java', message: 'Hello Java.',path:"/lan1"},
  33. { id: '10003', name: 'C++', message: 'Hello C++' ,path:"/lan2"},
  34. { id: '10004', name: 'JavaScript', message: 'Hello JavaScript',path:"/lan3" }
  35. ]
  36. };
  37. },
  38. methods:{
  39. click:function (path) {
  40. debugger;
  41. if(window.location.hash.replace("#!","")==path){
  42. this.show=false;
  43. Vue.nextTick(function () {
  44. this.show=true;
  45. }.bind(this))
  46. }else{
  47. this.$router.go({path:path});
  48. }
  49. }
  50. }
  51. });
  52. var LangDetailComponent = Vue.extend({
  53. template: `<div><h1>C#</h1><p>232323</p></div>`,
  54. computed: {
  55. model: function(){
  56. var list = this.$root.list;
  57. var id = this.$route.params.id;
  58. for(var i = 0; i < list.length; i++){
  59. if(list[i].id === id){
  60. return list[i];
  61. }
  62. }
  63. }
  64. },
  65. init:function () {
  66. alert("init");
  67. },
  68. created:function () {
  69. alert("created");
  70. },
  71. beforeCompile:function () {
  72. alert("beforeCompile");
  73. },
  74. compiled:function () {
  75. alert("compiled");
  76. },
  77. ready:function () {
  78. alert("ready");
  79. },
  80. attached:function () {
  81. alert("attached")
  82. },
  83. detached:function () {
  84. alert("detached")
  85. },
  86. beforeDestroy:function () {
  87. alert("beforeDestroy")
  88. },
  89. destroyed:function () {
  90. alert("destroyed")
  91. }
  92.  
  93. });
  94. var LangDetailComponent1 = Vue.extend({
  95. template: `<div><h1>Java</h1><p>Hello Java.</p></div>`,
  96. computed: {
  97. model: function(){
  98. var list = this.$root.list;
  99. var id = this.$route.params.id;
  100. for(var i = 0; i < list.length; i++){
  101. if(list[i].id === id){
  102. return list[i];
  103. }
  104. }
  105. }
  106. },
  107. init:function () {
  108. alert("init");
  109. },
  110. created:function () {
  111. alert("created");
  112. },
  113. beforeCompile:function () {
  114. alert("beforeCompile");
  115. },
  116. compiled:function () {
  117. alert("compiled");
  118. },
  119. ready:function () {
  120. alert("ready");
  121. },
  122. attached:function () {
  123. alert("attached")
  124. },
  125. detached:function () {
  126. alert("detached")
  127. },
  128. beforeDestroy:function () {
  129. alert("beforeDestroy")
  130. },
  131. destroyed:function () {
  132. alert("destroyed")
  133. }
  134.  
  135. });
  136. var LangDetailComponent2 = Vue.extend({
  137. template: `<div><h1>C++</h1><p>Hello C++</p></div>`,
  138. computed: {
  139. model: function(){
  140. var list = this.$root.list;
  141. var id = this.$route.params.id;
  142. for(var i = 0; i < list.length; i++){
  143. if(list[i].id === id){
  144. return list[i];
  145. }
  146. }
  147. }
  148. },
  149. init:function () {
  150. alert("init");
  151. },
  152. created:function () {
  153. alert("created");
  154. },
  155. beforeCompile:function () {
  156. alert("beforeCompile");
  157. },
  158. compiled:function () {
  159. alert("compiled");
  160. },
  161. ready:function () {
  162. alert("ready");
  163. },
  164. attached:function () {
  165. alert("attached")
  166. },
  167. detached:function () {
  168. alert("detached")
  169. },
  170. beforeDestroy:function () {
  171. alert("beforeDestroy")
  172. },
  173. destroyed:function () {
  174. alert("destroyed")
  175. }
  176.  
  177. });
  178. var LangDetailComponent3 = Vue.extend({
  179. template: `<div><h1>JavaScript</h1><p>Hello JavaScript</p></div>`,
  180. computed: {
  181. model: function(){
  182. var list = this.$root.list;
  183. var id = this.$route.params.id;
  184. for(var i = 0; i < list.length; i++){
  185. if(list[i].id === id){
  186. return list[i];
  187. }
  188. }
  189. }
  190. },
  191. init:function () {
  192. alert("init");
  193. },
  194. created:function () {
  195. alert("created");
  196. },
  197. beforeCompile:function () {
  198. alert("beforeCompile");
  199. },
  200. compiled:function () {
  201. alert("compiled");
  202. },
  203. ready:function () {
  204. alert("ready");
  205. },
  206. attached:function () {
  207. alert("attached")
  208. },
  209. detached:function () {
  210. alert("detached")
  211. },
  212. beforeDestroy:function () {
  213. alert("beforeDestroy")
  214. },
  215. destroyed:function () {
  216. alert("destroyed")
  217. }
  218.  
  219. });
  220.  
  221. var router = new VueRouter();
  222. router.map({
  223. '/lan': { component: LangDetailComponent },
  224. '/lan1': { component: LangDetailComponent1 },
  225. '/lan2': { component: LangDetailComponent2 },
  226. '/lan3': { component: LangDetailComponent3 }
  227. });
  228. router.start(AppComponent, '#app-container');
  229. </script>
  230.  
  231. </body>
  232. </html>

效果是:

这样在点相同的菜单,组件就重新加载,后面想优化每个菜单都加click,菜单很多话对页面是性能消耗,下篇想用vue能不能用事件委托绑定单击事件.暂时先写到这里.

这里在多说一句,Vue的路由是hash路由,所以要回去路由地址可以用 window.location.hash.replace("#!","")来获取.不知道hash路由的可以百度下,这里就不多说了

用Vue中遇到的问题和处理方法的更多相关文章

  1. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  2. vue中push()和splice()的使用方法

    vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...

  3. 用Vue中遇到的问题和处理方法(一)

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  4. 在vue中使用sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...

  5. 在vue中添加sass的配置的方法

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...

  6. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  7. vue中常见的问题以及解决方法

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...

  8. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  9. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

随机推荐

  1. 【python】for循环

    >>> exp='welcom to python'>>> for i in exp: print(i,end=' ') w e l c o m t o p y t ...

  2. less基础语法

    变量 //->LESS代码 @link-color: #428bca; @link-color-hover: darken(@link-color, 10%); a { color: @link ...

  3. SpringMVC底层数据传输校验的方案

    团队的项目正常运行了很久,但近期偶尔会出现BUG.目前观察到的有两种场景:一是大批量提交业务请求,二是生成批量导出文件.出错后,再执行一次就又正常了. 经过跟踪日志,发现是在Server之间进行jso ...

  4. lesson - 13 Linux系统日常管理2

    内容概要: 1. Linux抓包工具 tcpdump 系统自带抓包工具tcpdump -nn -i eth0 tcp and host 192.168.0.1 and port 80tcpdump - ...

  5. asp.net core 2.0+sqlsugar搭建个人网站系列(0)

    一些废话 马上就要过年了,回顾这一年最大的收获就是技术有了很大的提升,其他的方面没有什么改变,现在还是单身小屌丝一枚. 这一年来学习的主要重点就是asp.net core,中间也使用 core+EF做 ...

  6. 关于sleep函数的一些问题和资料

    //================================================================================================ 2 ...

  7. jq 中each的用法 (share)

    each的使用方法 在jQuery里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法.其实jQuery里的each方法是通过js里的ca ...

  8. 一起学Linux02之Linux系统启动过程

    这个Linux系统启动过程啊,说实话,我认为,刚学习的时候看几遍,了解一下就好.现在的主要任务是用.熟练了之后再来深究这个不急. 下面我就简单地说说吧. Linux系统的启动主要分为下列步骤: 1 内 ...

  9. 通过 python的 __call__ 函数与元类 实现单例模式

    简单一句话,当一个类实现__call__方法时,这个类的实例就会变成可调用对象. 直接上测试代码 class ClassA: def __call__(self, *args, **kwargs): ...

  10. linux socket编程:简易客户端与服务端

    什么是socket? socket起源于Unix,而Unix/Linux基本哲学之一就是“一切皆文件”,都可以用“打开open –> 读写write/read –> 关闭close”模式来 ...