#javascript #html #vue.js
Вопрос:
На традиционной 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
предотвратить?
Ответ №1:
В пакете 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
}
Комментарии:
1. Привет, Дэниел, похоже, что это
guardEvent
наблюдение за каким-то событием. Вы знаете, какое событие он смотрит?