Vue.js VueRouter路由器链接更改URL，但页面未更改

我的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)
    });

My routes.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
  }
];

<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>

我的组件文件EventsTable.vue文件中的路由器链接片段包含以下内容：

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
  }
];

<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页面

感谢您的帮助。谢谢

vue TurboLink软件包的第一行说明：

---

⚠️ 如果您使用的是vue路由器或其他Javascript路由库，则不需要使用TurboLink或此适配器。Turbolinks旨在通过在后台加载新页面来升级传统的请求呈现周期，该适配器使以这种方式呈现的页面上使用Vue组件成为可能。如果您决定使用单页应用程序，那么您已经拥有了所需的一切。我不是haml专家，但似乎您的表的每一行都有路由器视图。尝试将其从表中删除，并仅将单个路由器视图放在表外…路由文件不需要任何东西，只需要导入组件，因为它只是将在表外使用的定义。嗯…从my main.js中删除TurboLink并使用DOM内容加载程序，然后仅使用vue路由器，我还是有同样的问题。但可能是我使用Vue作为前端，使用rails作为后端。我仍然使用一些轨道路线，这可能是冲突的？我不确定。再次感谢您的洞察力。@Whnny是的，您的直觉是正确的，您无法使用Rails和Vue处理路由，您必须选择其中之一。我建议理解服务器端和客户端路由之间的区别：