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

2023-01-02 22:45:12 +08:00
 Nostalgia
Vue 如何实现根据当前所在页面不同决定点击后的不同行为?

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

野生前端请教下这个该怎么实现?谢谢大家。
1895 次点击
所在节点    Vue.js
10 条回复
learningman
2023-01-02 22:46:59 +08:00
你给这个 component 加个 onClick prop 不就完事
loading
2023-01-02 22:48:41 +08:00
提示一下

console.log(window.location.pathname)
rubyfans
2023-01-02 22:48:58 +08:00
给 C 这个组件新加一个跳转行为类型的属性,然后在使用这个组件的地方传给 C
elboble
2023-01-02 22:56:59 +08:00
要不 router 守卫下?根据新老 path
vivipure
2023-01-02 23:01:04 +08:00
要么组件暴露个 click 事件给调用方,要么在 c 组件内部根据路由进行不同的操作。推荐第一种
tuutoo
2023-01-02 23:27:18 +08:00
我做的话,可能是这样:
在 c 组件里 emit 这个 click 事件, 子事件传给父(A 和 B), 在 A 和 B 中监听 C 的 Click 事件, 做不同的处理.
ragnaroks
2023-01-03 09:05:04 +08:00
简单直接的做法就是根据当前路由,不过楼上说的将事件上抛也不错。
Envov
2023-01-03 10:43:37 +08:00
把 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
2023-01-03 18:06:51 +08:00
用 Provide / Inject ,实现更优雅点吧
WilliamLin
2023-03-18 10:24:03 +08:00
根据当前路由在 click 事件中做判断

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/906125

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX