Блог

На традиционной 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 предотвратить?

В пакете vue-маршрутизатора есть функция, вызываемая 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 amp;amp; e.button !== 0) { return }
  // don't redirect if `target="_blank"`
  if (e.currentTarget amp;amp; e.currentTarget.getAttribute) {
    var target = e.currentTarget.getAttribute('target');
    if (/b_blankb/i.test(target)) { return }
  }
  // this may be a Weex event which doesn't have this method
  if (e.preventDefault) {
    e.preventDefault();
  }
  return true
}