vue 跳转路由传参数用法

// 组件 a

<template>

<button @click="sendParams">传递</button>

</template>

<script>

export default

{

name: '',

data () { return { msg: 'test message' } },

methods: {

sendParams () { this.$router.push({ path: 'yourPath', name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找', params: { name: 'name', dataObj: this.msg }

/*query: { name: 'name', dataObj: this.msg }*/ }) } },

computed: { }, mounted () { } }

</script>

<style scoped></style>

// 组件b

<template>

<h3>msg</h3>

</template>

<script>

export default {

name: '',

data () { return { msg: '' } },

methods: { getParams () {

// 取到路由带过来的参数

let routerParams = this.$route.params.dataobj

// 将数据放在当前组件的数据内

this.msg = routerParams } },

watch: {

// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可

'$route': 'getParams'

} }

</script>

<style scoped></style>

在mounted 生命周期函数中使用

mounted: function () {
this.$nextTick(function () {
this.getParams();

this.getSelectList();
if(this.id){
this.formItem.code=this.id;
this.fetchData();
}else{
this.fetchData();
}

})
},