比方說,我有以下標記:<RouterLink tag="div" to="/somepath"> <p>Lorem ipsum dolor sit amet.</p> ... <button>A button</button></RouterLink>我正在使用tag="div",因為在元素<button>內嵌套 a是無效的 HTML5。a使用此標記,單擊 中的任意位置RouterLink(包括段落和按鈕)將導致導航。但我的要求是點擊按鈕不會導致導航,但點擊其他元素會。因此,我使用divwith@click處理程序來檢查單擊的元素是按鈕還是它的后代元素,如果不是,則只進行導航:<div @click="navigateSomewhere"> ...</div>export default { methods: { navigateSomewhere($event) { if(!$event.closest("button")) this.$router.push("/somePath") } }}但我想知道是否有更清潔的方法來做到這一點。我還創建了一個 MCVE:https ://codesandbox.io/s/vue-routerlink-button-3dlyx 。
如何在 RouterLink 中包含一個按鈕,以便在單擊按鈕時不會發生導航
至尊寶的傳說
2023-05-19 14:52:12