这是一个创建于 678 天前的主题，其中的信息可能已经有所发展或是发生改变。
Vue 如何实现根据当前所在页面不同决定点击后的不同行为？
现在有两个不同的页面 A 、B ，复用了同一个 component C （ eg. 侧边栏，或顶部导航栏，是全局的）
A 页面是主页面，希望点击 C 的链接后，局部刷新；
B 页面是个不重要的帮助 /说明页面，希望点击 C 的链接后，跳转到 A ，全局刷新。
野生前端请教下这个该怎么实现？谢谢大家。
现在有两个不同的页面 A 、B ，复用了同一个 component C （ eg. 侧边栏，或顶部导航栏，是全局的）
A 页面是主页面，希望点击 C 的链接后，局部刷新；
B 页面是个不重要的帮助 /说明页面，希望点击 C 的链接后，跳转到 A ，全局刷新。
野生前端请教下这个该怎么实现？谢谢大家。
 |
1
learningman 2023-01-02 22:46:59 +08:00  1
你给这个 component 加个 onClick prop 不就完事
|
 |
2
loading 2023-01-02 22:48:41 +08:00 via Android 1
提示一下
console.log(window.location.pathname) |
 |
3
rubyfans 2023-01-02 22:48:58 +08:00 via Android 1
给 C 这个组件新加一个跳转行为类型的属性，然后在使用这个组件的地方传给 C
|
 |
4
elboble 2023-01-02 22:56:59 +08:00 via Android 1
要不 router 守卫下？根据新老 path
|
 |
5
vivipure 2023-01-02 23:01:04 +08:00 1
要么组件暴露个 click 事件给调用方，要么在 c 组件内部根据路由进行不同的操作。推荐第一种
|
 |
6
tuutoo 2023-01-02 23:27:18 +08:00 1
我做的话,可能是这样:
在 c 组件里 emit 这个 click 事件, 子事件传给父(A 和 B), 在 A 和 B 中监听 C 的 Click 事件, 做不同的处理. |
 |
7
ragnaroks 2023-01-03 09:05:04 +08:00 1
简单直接的做法就是根据当前路由，不过楼上说的将事件上抛也不错。
|
 |
8
Envov 2023-01-03 10:43:37 +08:00 1
把 component C 的点击事件 emit 出去，由页面 A 、B 决定具体行为
如果你把点击时候的逻辑封装成了多个，可以把逻辑 emit 出去，例如： 在页面 a 中： <ComponentC onClick="({runA,runB})=>runA()"> 在页面 b 中 <ComponentC onClick="({runA,runB})=>runB()"> ComponentC 中的实现是 this.emit('click',{runA(){},runB(){}}) |
 |
9
liaoliaojun 2023-01-03 18:06:51 +08:00 1
用 Provide / Inject ，实现更优雅点吧
|
 |
10
WilliamLin 2023-03-18 10:24:03 +08:00 via iPhone
根据当前路由在 click 事件中做判断
|
Select Language