地址栏的 url 改变后，Vue 如何阻止浏览器向服务器发送请求？

Question

在传统的 html 页面中，如果点击了链接 <a href='www.xxx.com'>，则该页面将被重定向到该新页面。

在Vue 应用程序中，我们使用Router。这是下面的代码。

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/heroes',
    },
    {
      path: '/heroes/:id',
      name: 'hero-detail',
      // props: true,
      props: parseProps,
      component: () =>
        import(/* webpackChunkName: "bundle.heroes" */ './views/hero-detail.vue'),
    },
    {
      path: '*',
      component: PageNotFound,
    },
  ],
});

我们在浏览器中打开页面，它会加载主页。在这个页面中，有一个链接按钮，点击按钮时会调用this.$router.push。

点击链接按钮后，浏览器地址栏中的url被更改。通常浏览器会在地址发生变化时向服务器发送请求。但是浏览器从不向Vue 中的服务器发送请求。 Vue是如何预防的？

Answer 1

在 vue-router package 上有一个名为 guardEvent 的函数。看起来它可以防止在不同情况下重定向。

function guardEvent (e) {
  // don't redirect with control keys
  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) { return }
  // don't redirect when preventDefault called
  if (e.defaultPrevented) { return }
  // don't redirect on right click
  if (e.button !== undefined && e.button !== 0) { return }
  // don't redirect if `target="_blank"`
  if (e.currentTarget && e.currentTarget.getAttribute) {
    var target = e.currentTarget.getAttribute('target');
    if (/\b_blank\b/i.test(target)) { return }
  }
  // this may be a Weex event which doesn't have this method
  if (e.preventDefault) {
    e.preventDefault();
  }
  return true
}