目录

动态路由传参

query 方式传参

params 方式传参

组件间传值

---

路由跳转之编程式导航

编程式导航 就是 通过 js 来实现 路由跳转

使用了 vue-router 中提供的一个 属性 对象  router

push / replace  可以传入的参数    { string  ||  object }

捕获 重复跳转的异常处理   this.$router.push( url ).catch( ( ) => { } )

 

---

动态路由传参

路由配置：

{path: '/update/:uid/:name',    // uid 参数、name 参数name: 'Update',component: () => import('@/views/update.vue'),children : []
};

路由跳转：

this.$router.push('/update/123/zhangsan');    
// 如果没有添加对应参数，页面出现 404，不会到达对应页面

在对应页面中拿到路由参数进行网络请求： 

mounted(){let id = this.$route.params.uid;let name = this.$route.params.name;// 进行网络请求...
}

---

query 方式传参

路由配置：

{path: '/update',    name: 'Update',component: () => import('@/views/update.vue'),children : []
};

路由跳转(两种方式)：

this.$router.push({path : '/update',        // 方式1：通过 path 跳转query : {uid : 123,name : 'zhangsan'}
})this.$router.push({name : 'Update',        // 方式2：通过 name 跳转query : {uid : 456,name : 'lisi'}
})

在对应页面中拿到路由参数进行网络请求：

mounted(){let id = this.$route.query.uid;let name = this.$route.query.name;// 进行网络请求...
}

---

params 方式传参

路由配置：

{path: '/update',    name: 'Update',component: () => import('@/views/update.vue'),children : []
};

路由跳转(只有一种方式)：

this.$router.push({name : 'Update',        // 只能通过 name 跳转params : {uid : 1313,name : 'love'}
})

在对应页面中拿到路由参数进行网络请求：

mounted(){let id = this.$route.params.uid;let name = this.$route.params.name;// 进行网络请求...
}

---

Vue 路由传参 ----- params 和 query 的区别
背景：项目中需要跨页面传值，如试题 id , 遇到了刷新后，传的值消失，所以研究了以下两者的区别

1. params 只能用 name 来引入路由 ，query 用 path / name 来引入

2. params 类似于 post ，query 更加类似于我们 ajax 中 get 传参，说的再简单一点，前者在浏览器 地址栏中不显示参数，后者显示，所以 params 传值相对 安全 一些。

3. 取值用法类似分别是 this.$route.params.name 和 this.$route.query.name。

4. params 传值一刷新就没了，query 传值刷新还存在

---

src / router / routes / edit.js

export default {path: '/edit',name: 'Edit',component: () => import(/* webpackChunkName: "edit" */ '@/views/edit')
}

src / views / list / component / allMattersTab.vue  ( 子 组件 ) 

// 项目中所用
// elementUI 中的 MessageBox 弹框
// . . . 省略 . . .
.then(({ value }) => {this.$message({type: 'success',message: `${value}创建成功`})// 动态路由传参// this.$router.push(`/edit/${value}`)// 跳转页面时 （ 通过 query 属性传值 ）this.$router.push({path: 'edit',query: {title: value}})// 跳转页面时 （ 通过 params 方式隐士传参 ）/* this.$router.push({name: 'Edit',params: {title: value}}) */
})
.catch(() => {this.$message({type: 'info',message: '取消新建'})
})

 src / views / edit / index.vue

<template><div><el-inputclass="input_title"v-model="edit_title"placeholder="请输入问卷标题"</div>
</template><script>
export default {data() {return {edit_title: '问卷标题'，   // 绑定输入编辑框初始内容}}，created() {this.edit_title = this.$route.query.title// this.edit_title = this.$route.params.title}
}
</script>

---

组件间传值

事件总线 

非父子组件 或 更多层级间组件间 传值 ，在 Vue 中通过单独的 事件中心 来管理组件间的传值。

• 建立统一的事件中心

const bus = new Vue( ) 

• 传递数据方，通过一个事件触发  bus.$emit( 方法名，传递的数据 )
• 接收数据方，在生命周期函数中，通过  bus.$on( 方法名,[params] )来监听
• 销毁事件，在接受数据方，通过  bus.$off( 方法名 )  销毁之后无法监听数据

---

 Vue 兄弟组件之间的传值，使得兄弟组件之间可以联动，相互操作

方法：eventBus 事件总线 传值

思路：在 Vue 的 原型 （ prototype ） 上创建一个属性 eventBus ，该属性的值为 new Vue（），即 eventBus 也是一个 Vue 实例

第一步：在 src / main.js 中创建 eventBus 事件总线

// 创建 eventBus 事件总线
Vue.prototype.eventBus = new Vue()

第二步：在 子组件 A 中 ，通过 eventBus 事件总线 抛出 信息 和 值。this.eventBus 就是 Vue 实例 ，$emit 也是上面的方法

src / views / edit / components / parameter.vue  ( 关于 参数 的 子组件 )

<template><!-- 右侧参数配置项 --><div><!-- 是否为必答项 --><el-form-itemv-if="Object.keys(data).indexOf('validate') >= 0"label="必答"><div v-for="(item, idx) in data.validate" :key="idx"><el-switchv-model="item.required"active-color="#13ce66"inactive-color="#ff4949"@change="isRequired(data)"/></div></el-form-item></div>
</template><script>
export default {data() {return {}}，methods: {// 控制是否为必答项isRequired(boo) {// 利用 eventBus 事件总线传值if(boo.type == 'radio') {this.eventBus.$emit('radio', boo.validate[0].required)} else if (boo.type == 'checkbox') {this.eventBus.$emit('checkbox', boo.validate[0].required)} else if (boo.type == 'input') {this.eventBus.$emit('input', boo.validate[0].required)} else {console.log('假 boo' + boo)}}}
}
</script>

第三步：在子组件 B 中，在 created 或 mounted 等生命周期函数上，监听那个事件和获取那个值。

src / views / edit / components / container.vue  ( 关于 容器 的 子组件 )