路线如何改变，对我来说很重要。 所以，我想在浏览器或 gsm 的后退按钮更改路线时捕捉到。
这就是我所拥有的：
router.beforeEach((to, from, next) => {
if ( /* IsItABackButton && */ from.meta.someLogica) {
next(false)
return ''
}
next()
})
我可以使用一些内置的解决方案来代替IsItABackButton 评论吗？我猜 Vue-router 本身没有，但任何解决方法也可以在这里工作。还是有其他更喜欢的方式来识别它？
【问题讨论】：
标签： javascript cordova vue.js vuejs2 vue-router
这是我找到的唯一方法：
我们可以监听 popstate，把它保存在一个变量中，然后检查那个变量
// This listener will execute before router.beforeEach only if registered
// before vue-router is registered with Vue.use(VueRouter)
window.popStateDetected = false
window.addEventListener('popstate', () => {
window.popStateDetected = true
})
router.beforeEach((to, from, next) => {
const IsItABackButton = window.popStateDetected
window.popStateDetected = false
if (IsItABackButton && from.meta.someLogica) {
next(false)
return ''
}
next()
})
【讨论】：
正如@Yuci 所说，所有路由器钩子回调都是在之前更新popstate（因此对这个用例没有帮助）
你可以做什么：
methods: {
navigate(location) {
this.internalNavigation = true;
this.$router.push(location, function () {
this.internalNavigation = false;
}.bind(this));
}
}
现在您可以在 beforeEach 回调中检查标志并进行相应处理。
router.beforeEach((to, from, next) => {
if ( this.internalNavigation ) {
//Do your stufff
}
next()
})
【讨论】：
这很容易做到。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
// History back position, if user click Back button
return savedPosition
} else {
// Scroll to top of page if the user didn't press the back button
return { x: 0, y: 0 }
}
}
})
检查这里： https://router.vuejs.org/guide/advanced/scroll-behavior.html#async-scrolling
【讨论】：
beforeEach 相关的scrollBehavior 事件如何触发？
to.meta.fromHistory = (savedPosition !== null);。
对@yair-levy 的回答略有改进。
将push 包装到自己的navigate 方法并不方便，因为您通常想从不同的地方调用push()。相反，可以在一个地方修补路由器原始方法，而无需更改剩余代码。
以下代码是我的 Nuxt 插件，用于防止后退/前进按钮触发导航（在 Electron 应用中用于避免鼠标附加“后退”按钮导致后退，这会在 Electron 应用中造成混乱） 相同的原理可用于 vanilla Vue，并与您的自定义处理一起跟踪常见的后退按钮。
export default ({ app }, inject) => {
// this is Nuxt stuff, in vanilla Vue use just your router intances
const { router } = app
let programmatic = false
;(['push', 'replace', 'go', 'back', 'forward']).forEach(methodName => {
const method = router[methodName]
router[methodName] = (...args) => {
programmatic = true
method.apply(router, args)
}
})
router.beforeEach((to, from, next) => {
// name is null for initial load or page reload
if (from.name === null || programmatic) {
// triggered bu router.push/go/... call
// route as usual
next()
} else {
// triggered by user back/forward
// do not route
next(false)
}
programmatic = false // clear flag
})
}
【讨论】：
在我的 Vue 应用程序中检测后退按钮导航与其他类型的导航相比，我遇到了同样的问题。
我最终做的是向我真正的内部应用导航添加一个哈希，以区分预期的应用导航和后退按钮导航。
例如，在这条路线/page1 上，我想捕捉返回按钮导航以关闭打开的模型。想象一下，我真的想导航到另一条路线，我会在该路线上添加一个哈希：/page2#force
beforeRouteLeave(to, from, next) {
// if no hash then handle back button
if (!to.hash) {
handleBackButton();
next(false); // this stops the navigation
return;
}
next(); // otherwise navigate
}
这是相当简单的，但它有效。如果您在应用程序中使用哈希值超过此值，您将需要检查哈希实际包含的内容。
【讨论】：
performance.navigation 已被弃用，所以请注意！ https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
当您想要注册任何全局事件侦听器时，您应该非常小心。自注册时刻起每次都会调用它，直到您手动取消注册。对我来说，情况是我在创建组件时注册了 popstate 侦听器以侦听并在以下情况下调用某些操作：
被点击。之后我取消注册 popstate 侦听器，不要在我不想调用它的其他组件中调用它，保持你的代码和方法调用干净:)。
我的代码示例：
created() {
window.addEventListener('popstate', this.popstateEventAction );
},
methods: {
popstateEventAction() {
// ... some action triggered when the back button is clicked
this.removePopstateEventAction();
},
removePopstateEventAction() {
window.removeEventListener('popstate', this.popstateEventAction);
}
}
最好的问候！
【讨论】：