title: Vue中跳转页面传参总结
description: Vue中跳转页面传参总结
tags:
- 前端
- Vue
categories: 前端
date: 2021-01-01 14:26:00
Vue中跳转页面传参总结
前言
各位小伙伴,大家好,今天是2021年的第一天,祝大家吃吃喝喝,越吃越瘦,越喝越美
页面传参方式
在页面传参数时,有两种办法传递参数,一种是name与params传参,第二种是path与query结合传参。query传参类似于ajax中get传参,params类似于post传参,简单说,前者在浏览器地址中显示参数,后者则不显示
this.$router.push传参
this.$router.push({name: '路由命名‘, params: {参数名:参数值,参数名:参数值}))
ex:
用params与name传参数时,需要配置路由页面index.js中配置name
跳转后页面获取参数
如果不配置name的值话,则在跳转后的页面会显示undefined
this.$router.push({path: ‘路由命名’, query:{参数名:参数值}})
接收参数:this.$router.query.参数名
vue中created,mounted等方法整理
**created:**html加载完成之前,执行。执行顺序:父组件-子组件
**mounted:**html加载完成后执行。执行顺序:子组件-父组件
**methods:**事件方法执行
**watch:**watch是去监听一个值的变化,然后执行相对应的函数。
**computed:**computed是计算属性,也就是依赖其它的属性计算所得出最后的值
export default {
name: "draw",
data(){ // 定义变量source
return {
source:new ol.source.Vector({wrapX: false}),
}
},
props:{ //接收父组件传递过来的参数
map:{
//type:String
},
},
mounted(){ //页面初始化方法
if (map==map){
}
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
},
watch: { //监听值变化:map值
map:function () {
console.log('3333'+this.map);
//return this.map
console.log('444444'+this.map);
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
}
},
methods:{ //监听方法 click事件等,执行drawFeatures方法
drawFeatures:function(drawType){}
}
},
methods:{ //监听方法 click事件等,执行drawFeatures方法
drawFeatures:function(drawType){}
}