Vue. js Ссылка на маршрутизатор VueRouter изменяет URL, но страница не - PullRequest
Новая
       51

Vue. js Ссылка на маршрутизатор VueRouter изменяет URL, но страница не

1 голос
/ 29 января 2020

my main. js файл имеет следующие 

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import EventIndex from '../src/views/EventsIndex.vue';
import EventsTable from '../src/components/EventsTable.vue'
import { routes } from '../src/router/routes';

Vue.use(TurbolinksAdapter);
Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

document.addEventListener('turbolinks:load', () => {
  var element = document.getElementById('vue_code');
  if (element != null) {
    new Vue({
      el: '#vue_code',
      Store,
      router,
      render: h => h(EventIndex)
    });

Мои маршруты. js файл имеет следующее: 

import Vue from "vue/dist/vue.esm";
import VueRouter from "vue-router";
import EventForm from "../components/EventForm";

Vue.use(VueRouter);

const routes = [
  {
    path: "/events/new",
    name: "EventForm",
    component: EventForm
  }
];

Фрагмент ссылки на маршрутизатор из моего файла компонента EventsTable. vue Файл содержит следующее: 

<template lang=haml>
...

%tbody
  %tr{v-for: "event in events"}
    %td
      %router-link.fa.fa-pencil{to: "/events/new"}
      %router-view

 ...
<template>

<script>
    import EventForm from './EventForm';

    components: {
      EventForm
    }
</script>

Когда я нажимаю на ссылку, я ожидаю, что страница перейдите на страницу EventForm. Вместо этого URL изменяется, но окно браузера не изменяется. Но как только я перезагрузил страницу, браузер переходит на страницу EventForm.

Любая помощь приветствуется. Спасибо

1 Ответ

1 голос
/ 30 января 2020

В первой строке пакета vue-turbolinks указано:

⚠️ Если вы используете vue -router или другую Javascript библиотеку маршрутизации, вам не нужно использовать Turbolinks или этот адаптер. Turbolinks предназначен для выравнивания традиционного цикла обработки запросов путем загрузки новой страницы в фоновом режиме, и этот адаптер позволяет использовать компоненты Vue на страницах, отображаемых таким образом. Если вы решили использовать одностраничное приложение, у вас уже есть все, что вам нужно. 100

Вы не можете использовать vue-router и Turbolinks вместе. Turbolinks обрабатывает всю навигацию вашего сайта. Навигация с использованием vue-router не работает, потому что она пытается сделать историю pu sh вместо загрузки всей страницы.

Я предлагаю программную маршрутизацию с использованием функции Turbolinks.visit() вместо vue-router , Вам нужно создать новое представление для страницы EventForm, которая загружает ваш vue компонент.

...