用Vue中遇到的问题和处理方法(一)
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧:
- 测试部抛出问题一:在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中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- vue中push()和splice()的使用方法
vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...
- 用Vue中遇到的问题和处理方法
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- 在vue中使用sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...
- 在vue中添加sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- vue中常见的问题以及解决方法
有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...
- Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
随机推荐
- SQL点滴19—T-SQL中的透视和逆透视
原文:SQL点滴19-T-SQL中的透视和逆透视 透视 今天抽一点时间来看看透视和逆透视语句,简单的说就是行列转换.假设一个销售表中存放着产品号,产品折扣,产品价格三个列,每一种产品号可能有多种折扣, ...
- avalonjs 1.3.7发布
avalonjs 1.3.7发布 又到每个月的15号了,现在avalon已经固定在每个月的15号发布新版本.这次发布又带来许多新特性,让大家写码更加轻松,借助于“操作数据即操作DOM”的核心理念与双向 ...
- 大数据时代：基于微软案例数据库数据挖掘知识点总结（Microsoft 聚类分析算法）
原文:(原创)大数据时代:基于微软案例数据库数据挖掘知识点总结(Microsoft 聚类分析算法) 本篇文章主要是继续上一篇Microsoft决策树分析算法后,采用另外一种分析算法对目标顾客群体的挖掘 ...
- web浏览器中javascript
1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...
- SpringMVC视图
SpringMVC视图机制详解[附带源码分析] 目录 前言 重要接口和类介绍 源码分析 编码自定义的ViewResolver 总结 参考资料 前言 SpringMVC是目前主流的Web MVC框架之一 ...
- 云服务器下ASP.NET Core 1.0环境搭建（包含mono与coreclr）
最近.net core如火如荼,国内这方面环境搭建方面的文档也非常多,但是不少已经是过时的,就算按照那个流程走下去也避免不了一些地方早就不一样了.所以下面我将从头到尾的教大家搭建一次环境,并且成功运行 ...
- OSG在WIN与VS中配置与测试
欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/1392531060.html Windo ...
- DOM（二） 判断节点包含关系
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- C#使用文件监控对象FileSystemWatcher 实现数据同步
在C#使用文件监控对象FileSystemWatcher 实现数据同步 2013-12-12 18:24 by 幕三少, 352 阅读, 3 评论, 收藏, 编辑 最近在项目中有这么个需求,就是得去实 ...
- hdu 2159
二维背包,dp[i][j]表示忍耐度为i,且还可以杀j个怪时能获得的最大经验值 dp[i][j]=max(dp[i][j],dp[i-r[k]][j-1]+e[k]),r[k]为杀死第k种怪掉的忍耐度 ...