Last active
May 16, 2019 03:42
-
-
Save moreta/c6ebd750589a60f4b53719a0445c42a6 to your computer and use it in GitHub Desktop.
Workaround vue router-link current path click no action (router-linkのcurrent pathの無反応回避策)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<a v-bind="$attrs" @click="handleLinkClick(to, $event)"> | |
<slot></slot> | |
</a> | |
</template> | |
<script> | |
/** | |
* current pathの時に無反応を防ぐため、 | |
* current pathの場合にはwindow.location.href = toでURL遷移させる | |
*/ | |
export default { | |
name: 'RefreshLink', | |
props: { | |
to: { | |
type: String, | |
default: '/' | |
} | |
}, | |
methods: { | |
handleLinkClick(to, $event) { | |
if (!($event.ctrlKey || $event.metaKey) && this.$route.path === to) { | |
window.location.href = to | |
} else if ($event.ctrlKey || $event.metaKey) { | |
window.open(to) | |
} else { | |
this.$router.push(to) | |
} | |
} | |
} | |
} | |
</script> |
page reloadでscroll positionを維持したいなら
window.location.href = to
の代わりに
this.$router.go()
を使う
また browserのpage reloadをしたくない場合には
window.location.href = to
の代わりに
このように、新しいquery stringをつけてreplaceする
const query = { ...this.$route.query, _: new Date().getTime() };
const newRoute = { ...this.$route, query };
this.$router.replace(newRoute);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
vuejs/vue-router#2430