用Vue中遇到的问题和处理方法(一)
2017-01-14 17:55
609 查看
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧:
测试部抛出问题一:在Vue1.0路由vue-router中,当点击菜单一个组件加载出来表格列表,输入查询条件查询,当在单击这个菜单后表格的数据没有重置查询条件和查询结果.
原因分析:Vue路由在页面渲染一个组件后加载后,再加载这个组件,组件不会摧毁后在重新生成这个组件,不会重新触发组件的生命周期中的方法.代码如下:
执行效果:
着三个路由都是同一个组件,但点击其他的时候组件中的所有生命周期的方法都没有调用,去vue-router的api上看没有找到重新加载路由的配置配置项.
在实际开发中这个问题在两个菜单共用一个组件,设置传参来判断加载不同的数据的情况下,会出现另一个ready方法不走导致数据显示不真确.解决思路可以加监听路由地址触发ready事件.
而上面的解决方法是用v-if来重新加载组件,代码如下:
效果是:
这样在点相同的菜单,组件就重新加载,后面想优化每个菜单都加click,菜单很多话对页面是性能消耗,下篇想用vue能不能用事件委托绑定单击事件.暂时先写到这里.
这里在多说一句,Vue的路由是hash路由,所以要回去路由地址可以用 window.location.hash.replace("#!","")来获取.不知道hash路由的可以百度下,这里就不多说了
测试部抛出问题一:在Vue1.0路由vue-router中,当点击菜单一个组件加载出来表格列表,输入查询条件查询,当在单击这个菜单后表格的数据没有重置查询条件和查询结果.
原因分析:Vue路由在页面渲染一个组件后加载后,再加载这个组件,组件不会摧毁后在重新生成这个组件,不会重新触发组件的生命周期中的方法.代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>learning vue</title> </head> <body> <div id="app-container"> <ul> <li v-for="item in $root.list"> <a v-link="{ path: '/lang/' + item.id }">{{ item.name }}{{para}}{{params}}</a> </li> </ul> <router-view :params="params"></router-view> </div> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> Vue.config.debug = true; Vue.use(VueRouter); var AppComponent = Vue.extend({ data: function(){ return { params:111, list: [ { id: '10001', name: 'C#', message: 'Hello C#' }, { id: '10002', name: 'Java', message: 'Hello Java.' }, { id: '10003', name: 'C++', message: 'Hello C++' }, { id: '10004', name: 'JavaScript', message: 'Hello JavaScript' } ] }; } }); var LangDetailComponent = Vue.extend({ template: `<div><h1>{{ model.name }}</h1><p>{{ model.message }}</p></div>`, computed: { model: function(){ var list = this.$root.list; var id = this.$route.params.id; for(var i = 0; i < list.length; i++){ if(list[i].id === id){ return list[i]; } } } }, init:function () { alert("init"); }, created:function () { alert("created"); }, beforeCompile:function () { alert("beforeCompile"); }, compiled:function () { alert("compiled"); }, ready:function () { alert("ready"); }, attached:function () { alert("attached") }, detached:function () { alert("detached") }, beforeDestroy:function () { alert("beforeDestroy") }, destroyed:function () { alert("destroyed") } }); var router = new VueRouter(); router.map({ '/lang/:id': { component: LangDetailComponent } }); router.start(AppComponent, '#app-container'); </script> </body> </html>
执行效果:
着三个路由都是同一个组件,但点击其他的时候组件中的所有生命周期的方法都没有调用,去vue-router的api上看没有找到重新加载路由的配置配置项.
在实际开发中这个问题在两个菜单共用一个组件,设置传参来判断加载不同的数据的情况下,会出现另一个ready方法不走导致数据显示不真确.解决思路可以加监听路由地址触发ready事件.
而上面的解决方法是用v-if来重新加载组件,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>learning vue</title> </head> <body> <div id="app-container"> <ul> <li v-for="item in $root.list"> <a href="javascript:void(0)" @click="click(item.path)">{{ item.name }}</a> </li> </ul> <router-view v-if="show"></router-view> </div> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> Vue.config.debug = true; Vue.use(VueRouter); var AppComponent = Vue.extend({ data: function(){ return { show:true, list: [ { id: '10001', name: 'C#', message: 'Hello C#',path:"/lan"}, { id: '10002', name: 'Java', message: 'Hello Java.',path:"/lan1"}, { id: '10003', name: 'C++', message: 'Hello C++' ,path:"/lan2"}, { id: '10004', name: 'JavaScript', message: 'Hello JavaScript',path:"/lan3" } ] }; }, methods:{ click:function (path) { debugger; if(window.location.hash.replace("#!","")==path){ this.show=false; Vue.nextTick(function () { this.show=true; }.bind(this)) }else{ this.$router.go({path:path}); } } } }); var LangDetailComponent = Vue.extend({ template: `<div><h1>C#</h1><p>232323</p></div>`, computed: { model: function(){ var list = this.$root.list; var id = this.$route.params.id; for(var i = 0; i < list.length; i++){ if(list[i].id === id){ return list[i]; } } } }, init:function () { alert("init"); }, created:function () { alert("created"); }, beforeCompile:function () { alert("beforeCompile"); }, compiled:function () { alert("compiled"); }, ready:function () { alert("ready"); }, attached:function () { alert("attached") }, detached:function () { alert("detached") }, beforeDestroy:function () { alert("beforeDestroy") }, destroyed:function () { alert("destroyed") } }); var LangDetailComponent1 = Vue.extend({ template: `<div><h1>Java</h1><p>Hello Java.</p></div>`, computed: { model: function(){ var list = this.$root.list; var id = this.$route.params.id; for(var i = 0; i < list.length; i++){ if(list[i].id === id){ return list[i]; } } } }, init:function () { alert("init"); }, created:function () { alert("created"); }, beforeCompile:function () { alert("beforeCompile"); }, compiled:function () { alert("compiled"); }, ready:function () { alert("ready"); }, attached:function () { alert("attached") }, detached:function () { alert("detached") }, beforeDestroy:function () { alert("beforeDestroy") }, destroyed:function () { alert("destroyed") } }); var LangDetailComponent2 = Vue.extend({ template: `<div><h1>C++</h1><p>Hello C++</p></div>`, computed: { model: function(){ var list = this.$root.list; var id = this.$route.params.id; for(var i = 0; i < list.length; i++){ if(list[i].id === id){ return list[i]; } } } }, init:function () { alert("init"); }, created:function () { alert("created"); }, beforeCompile:function () { alert("beforeCompile"); }, compiled:function () { alert("compiled"); }, ready:function () { alert("ready"); }, attached:function () { alert("attached") }, detached:function () { alert("detached") }, beforeDestroy:function () { alert("beforeDestroy") }, destroyed:function () { alert("destroyed") } }); var LangDetailComponent3 = Vue.extend({ template: `<div><h1>JavaScript</h1><p>Hello JavaScript</p></div>`, computed: { model: function(){ var list = this.$root.list; var id = this.$route.params.id; for(var i = 0; i < list.length; i++){ if(list[i].id === id){ return list[i]; } } } }, init:function () { alert("init"); }, created:function () { alert("created"); }, beforeCompile:function () { alert("beforeCompile"); }, compiled:function () { alert("compiled"); }, ready:function () { alert("ready"); }, attached:function () { alert("attached") }, detached:function () { alert("detached") }, beforeDestroy:function () { alert("beforeDestroy") }, destroyed:function () { alert("destroyed") } }); var router = new VueRouter(); router.map({ '/lan': { component: LangDetailComponent }, '/lan1': { component: LangDetailComponent1 }, '/lan2': { component: LangDetailComponent2 }, '/lan3': { component: LangDetailComponent3 } }); router.start(AppComponent, '#app-container'); </script> </body> </html>
效果是:
这样在点相同的菜单,组件就重新加载,后面想优化每个菜单都加click,菜单很多话对页面是性能消耗,下篇想用vue能不能用事件委托绑定单击事件.暂时先写到这里.
这里在多说一句,Vue的路由是hash路由,所以要回去路由地址可以用 window.location.hash.replace("#!","")来获取.不知道hash路由的可以百度下,这里就不多说了
相关文章推荐
- 用Vue中遇到的问题和处理方法
- 用Vue中遇到的问题和处理方法
- spark 处理遇到的问题解决方法
- 使用uiautomator时遇到问题的处理方法
- GDAL2.1.1库在Ubuntu14.04下编译时遇到的问题处理方法
- 完整编译Hi3519V101_SDK_V1.0.1.0遇到的问题及处理方法
- sqlite3 jdbc、c接口、python接口处理中文时遇到的问题及其解决方法
- Oracle非默认监听的处理会遇到的问题以及处理方法
- 通过Fuel 7.0安装OpenStack Kilo遇到的问题及处理的方法
- 我在网页设计中遇到的一些问题以及处理方法整理
- GDAL2.1.1库在Ubuntu14.04下编译时遇到的问题处理方法
- jQuery中getScript方法引入外部js文件,乱码处理(自己遇到的问题)
- swfupload使用中遇到问题处理方法
- 使用pip安装tensorflow 0.80,python 使用tensorflow 0.80遇到的问题及处理方法
- 处理JSP中文跨页面间传参乱码的问题有两种方法实现方法(每个搞JSP的最常遇到的问题之一) 实例版:)
- orange's一个操作系统的实现实验遇到的问题及处理方法
- c# 安装包制作 可能遇到的问题及处理方法
- 事务处理遇到的问题解决方法
- 项目中遇到的一些问题或异常以及处理方法
- Ubuntu12.04编译openwrt过程中遇到的一些问题及处理方法