Vue 如何实现根据当前所在页面不同决定点击后的不同行为？

› Vue.js

This topic created in 1247 days ago, the information mentioned may be changed or developed.

Vue 如何实现根据当前所在页面不同决定点击后的不同行为？

现在有两个不同的页面 A 、B ，复用了同一个 component C （ eg. 侧边栏，或顶部导航栏，是全局的）
A 页面是主页面，希望点击 C 的链接后，局部刷新；
B 页面是个不重要的帮助 /说明页面，希望点击 C 的链接后，跳转到 A ，全局刷新。

野生前端请教下这个该怎么实现？谢谢大家。

页面

Vue

点击

全局

10 replies • 2023-03-18 10:24:03 +08:00

learningman

Jan 2, 2023

你给这个 component 加个 onClick prop 不就完事

loading

Jan 2, 2023 via Android

提示一下

console.log(window.location.pathname)

rubyfans

Jan 2, 2023 via Android

给 C 这个组件新加一个跳转行为类型的属性，然后在使用这个组件的地方传给 C

elboble

Jan 2, 2023 via Android

要不 router 守卫下？根据新老 path

vivipure

Jan 2, 2023

要么组件暴露个 click 事件给调用方，要么在 c 组件内部根据路由进行不同的操作。推荐第一种

tuutoo

Jan 2, 2023

我做的话,可能是这样:
在 c 组件里 emit 这个 click 事件, 子事件传给父(A 和 B), 在 A 和 B 中监听 C 的 Click 事件, 做不同的处理.

ragnaroks

Jan 3, 2023

简单直接的做法就是根据当前路由，不过楼上说的将事件上抛也不错。

Envov

Jan 3, 2023

把 component C 的点击事件 emit 出去，由页面 A 、B 决定具体行为

如果你把点击时候的逻辑封装成了多个，可以把逻辑 emit 出去，例如：
在页面 a 中：
<ComponentC onClick="({runA,runB})=>runA()">
在页面 b 中
<ComponentC onClick="({runA,runB})=>runB()">
ComponentC 中的实现是 this.emit('click',{runA(){},runB(){}})

liaoliaojun

Jan 3, 2023

用 Provide / Inject ，实现更优雅点吧

WilliamLin

Mar 18, 2023 via iPhone

根据当前路由在 click 事件中做判断