正常的页面跳转与传参，推荐方法2、3,不用特别修改路由

第一种

this.$router.push({

path: `/describe/${id}`,

})

路由配置:

{

path: '/describe/:id',

name: 'Describe',

component: Describe

}

接收参数：

this.$route.params.id

第二种

this.$router.push({

name: 'Describe',

params: {

id: id

}

})

路由配置

{

path: '/describe',

name: 'Describe',

component: Describe

}

获取参数:

this.$route.params.id

第三种

this.$router.push({

path: '/describe',

query: {

id: id

}

})

路由配置:

{

path: '/describe',

name: 'Describe',

component: Describe

}

参数获取:

this.$route.query.id

父页面与子页面之间传参

父页面区域设置

其中 @my-event="getMyEvent" 用来给子页面调用的

子页面调用方法

this.$emit('my-event','refresh');

//其中 refresh 是参数

父页面接收,其中id 对应参数 refresh,可多个，按顺序输入输出参数

......

getMyEvent: function(id) {

this.upstate(id)

},

......

父页面调用子页面方法

this.$refs.childrenmode.loadselect();

其中子页面需要有 loadselect 方法,否则会报错，需要注意的是，这个子页面必须是已经加载好的。

prop和$ref之间的区别：

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。

$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

prop使用样例

子

export default {

name:'my_test_child',

data() {

return {

my_msg:''

};

},

props:{

msg:{

type: String,

default: '未初始化',

}

},

watch:{

// msg(val){

// console.log('监视刷新数据');

// this.my_msg=val;

// }

},

methods: {

refresh_data:function(){

console.log('#ref 主动刷新数据');

this.my_msg=this.msg;

}

}

};

父

import children from './personmode/children.vue';

export default {

components:{

'mychild':children

},

data() {

return {

tm:''

};

},

methods: {

myrefresh:function(){

console.log('变化');

this.$refs.child.refresh_data();

}

}

};