本文共 1595 字,大约阅读时间需要 5 分钟。
title: Vue中跳转页面传参总结
description: Vue中跳转页面传参总结 tags:各位小伙伴,大家好,今天是2021年的第一天,祝大家吃吃喝喝,越吃越瘦,越喝越美
在页面传参数时,有两种办法传递参数,一种是name与params传参,第二种是path与query结合传参。query传参类似于ajax中get传参,params类似于post传参,简单说,前者在浏览器地址中显示参数,后者则不显示
this.$router.push({name: '路由命名‘, params: {参数名:参数值,参数名:参数值}))
ex:
用params与name传参数时,需要配置路由页面index.js中配置name
跳转后页面获取参数
如果不配置name的值话,则在跳转后的页面会显示undefined
接收参数:this.$router.query.参数名
**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){} }转载地址:http://skwzi.baihongyu.com/