往期回顾：
需要实现：点击表单获取行中信息作为搜索关键字到用户信息页面搜索框中填入搜索框
很久没写前端了，刚刚客户求，完成顺便写文章比较全面的总结一下记录
下面是实现的效果
下面讲解详细教程：
以vue框架为例：
我当时第一想到的方法是存在sessionStorage 中，在 Vue 组件的生命周期钩子 created 中执行的。this.load()在组件创建时，加载页面需要的数据，并且尝试从 sessionStorage 中读取值并保存到组件中。但是这个方法有不足之处，这里不详细讲解。
最常用的方法就是听说路由传参，使用组件传参方法将用户名传递给用户信息组件进行搜索的方法就叫做路由传参。在 vue-router 中，我们可以使用 $router.push() 或 $router.replace() 带上参数对象，以及 $route.query 来访问这些参数。这种方式，就是路由传参js跳转页面，常用于页面间传递参数或者在不同页面间获取参数。
也是我直接使用的方法
我们随便举例吧，我就不说后端了js跳转页面，直接直接以data里面的数据为例比较直观点。
首先在订单表格组件中，我们需要在用户按钮点击时触发一个自定义事件，将用户名作为参数传递给用户信息组件，这里我们假设行数据中有一个名为name的属性。
{{ scope.row.name }}
export default {
data() {
return {
data: [
{ name: ‘John Doe’ },
{ name: ‘Jane Smith’ }
]
}
},
methods: {
handleUserClick(row) {
// 路由跳转，并将用户名传递给用户信息组件
this.$router.push({ path: ‘/user-info’, query: { name: row.name }})
},
handleClick(row) {
// 路由跳转
this.$router.push({ path: ‘/user-info’})
}
}
}
然后在用户信息组件中使用 $route.query 获取传递的用户名
export default {
data() {
return {
searchName: ”
}
},
created() {
this.searchName = this.$route.query.name;
},
methods: {
searchUsers() {
// 调用后端搜索接口, 发送 searchName
// …
}
}
}
在用户信息组件的 template 中使用一个 input 标签来实现搜索框
这样你就可以在点击订单页面某行中的用户按钮时，使用组件传参方法将用户名传递给用户信息组件进行搜索，并且可以进行路由跳转到用户信息页面。记得给路由配置好，在路由配置文件中，配置用户信息路由，query字段设置。
注意上面的代码完成了跳转后的页面搜索框获得参数，但是需要手动执行点击查询按钮进行查询
如果需要在跳转到页面加载完毕后自动点击查询按钮。
可以给按钮的点击事件load
mounted() {
this.load()
}
或者使用 JavaScript 来触发点击事件：
mounted() {
const button = this.$refs.queryButton
button.$el.click()
}
这里需要在el-button 上绑定 ref=”queryButton” 属性，这样才能获取到这个按钮的 DOM 元素。
也可以通过在 Vue 组件的 created 钩子函数中执行点击事件，在这个钩子函数中，组件实例已经创建完毕，但是还未挂载到页面上，所以也可以实现在页面加载完毕后自动点击查询按钮。
created() {
this.load()
}
其他方法供参考：
方法一：
如果跳转链接不能带参数, 你可以在 el-table-column 中添加按钮并使用本地存储来实现点击某行中的用户按钮将用户名作为搜索关键字到用户信息页面搜索框中进行搜索的功能。
首先, 在 el-table-column 标签中添加按钮, 并使用 v-bind 指令绑定当前行数据
Search
然后在组件中定义 handleClick() 方法, 该方法接收一个参数，即当前行的数据。使用这些数据进行操作
methods: {
handleClick(row) {
localStorage.setItem(‘searchKey’, row.name)
this.$router.push({ path: ‘/user-info’})
}
}
之后在用户信息页面mounted钩子中读取这个localStorage, 并将其填充到搜索框中
mounted(){
let searchKey = localStorage.getItem(‘searchKey’)
this.searchName = searchKey
// 或者
document.querySelector(“#search-input”).value = searchKey
}
这样就可以点击订单表中某行中的用户按钮将该用户名作为搜索关键字到用户信息页面搜索框中进行搜索
方法二：
使用Vuex来管理全局状态，你可以在 el-table-column 中添加按钮并在点击事件处理函数中将用户名存储在 Vuex 中的状态中，然后在用户信息页面中读取并填充到搜索框中
首先, 在store.js中配置vuex状态
state:{
searchKey:”
},
mutations:{
setSearchKey:function(state,searchKey){
state.searchKey = searchKey;
}
}
然后在组件中定义 handleClick() 方法, 该方法接收一个参数，即当前行的数据。使用这些数据进行操作
methods: {
handleClick(row) {
this.$store.commit(‘setSearchKey’, row.name)
this.$router.push({ path: ‘/user-info’})
}
}
在用户信息组件中, 使用 computed 来从 vuex store 中读取 searchKey
computed: {
searchKey(){
return this.$store.state.searchKey
}
}
这样就可以点击订单表中某行中的用户按钮将该用户名作为搜索关键字到用户信息页面搜索
方法三：
使用 Vue 实例的事件系统, 在点击某行中的用户按钮时，发送一个自定义事件，在用户信息页面中监听该事件并将用户名填充到搜索框中.
首先, 在点击事件处理函数中发送自定义事件
methods: {
handleClick(row) {
this.$emit(‘search-user’, row.name)
this.$router.push({ path: ‘/user-info’})
}
}
然后,在用户信息组件中监听自定义事件
created() {
this.$on(‘search-user’, (name) => {
this.searchName = name
})
}
方法四：
使用非持久化的 Vue Router 导航守卫可以在跳转之前将用户名存储在内存中，在用户信息页面中读取并填充到搜索框中。
首先，定义一个全局变量 searchKey，在点击事件处理函数中将当前行的用户名赋值给它。
let searchKey = null
methods: {
handleClick(row) {
searchKey = row.name
this.$router.push({ path: '/user-info'})
}
}
然后在导航守卫中使用 beforeEach 钩子，在跳转到用户信息页面之前将searchKey 的值赋给输入框。
router.beforeEach((to, from, next) => {
if (to.path === ‘/user-info’) {
// 在这里赋值给搜索框
document.querySelector(“#search-input”).value = searchKey
searchKey = null
}
next()
})
也可以在 created 钩子中读取searchKey,并将其赋值给搜索框
created() {
this.searchName = searchKey
searchKey = null
}
需要注意的是在这种情况下，在跳转之前搜索关键字被存储在内存中，而不是持久化的存储，因此如果页面刷新或者关闭窗口，它就会丢失。
关注一下下期更精彩，如果你遇到什么问题也可以给公众号弹窗消息留言。欢迎各位学习者私聊进微信群。
admin
