Странное VueJS поведение при маршрутизации - PullRequest
Новая
       5

Странное VueJS поведение при маршрутизации

2 голосов
/ 19 февраля 2020

У меня проблема с маршрутизацией. У меня есть простой обработчик щелчков для ро sh к маршрутизатору. 

methods: {
   page(path) {
      this.$router.push(path);
   }
}

, который будет отображать правильное содержимое, но URL кратко переходит на правильный URL, но затем идет вернуться к предыдущему. Я только что узнал, что это произошло, потому что когда я нажал кнопку «Назад» в браузере, URL-адрес был верным.

Я открыл консоль и решил проверить маршрутизатор 

$vm0.$router.push('/my-path');

Что не отображалось только правильное содержимое, но URL-адрес также был правильным.

Теперь я озадачен тем, как отлаживать это дальше, поэтому, если у кого-то есть какие-либо идеи, пожалуйста, сообщите мне.

router. js 

import VueRouter from 'vue-router';

const routes = [
    { path: '/', component: require('./views/Campaigns').default },
    { path: '/foo', component: require('./views/Foo').default },
    { path: '/campaign/edit', component: require('./views/EditCampaign').default },
];

export default new VueRouter({
    routes
});

основной. js

import Vue from 'vue'
import VueRouter from 'vue-router';
import router from './routes';

Vue.config.productionTip = false;
Vue.use(VueRouter);

new Vue({
  el: '#app',
  router
});

С уважением

1 Ответ

2 голосов
/ 19 февраля 2020

У вас есть событие click, прикрепленное к элементу <a>, поэтому вам нужно предотвратить поведение по умолчанию, которое заключается в переходе по ссылке.

Это можно сделать двумя способами:

1. Использование модификатора события

Чтобы решить эту проблему, Vue предоставляет модификаторы событий для v-on. Напомним, что модификаторы - это директивные постфиксы, обозначенные точкой. 

<a @click.prevent="page('/foo')">Button</a>

2. Использование обработчика событий

Если вам нужен доступ к объекту события: 

<a @click="page('/foo', $event)">Button</a>

page(path, e) {
  e.preventDefault()
  this.$router.push(path)
}

Это может также относиться к событиям щелчка на других типах элементов, таких как кнопки внутри сформироваться. Источник

...