Vue.js VueRouter 路由器链接更改 URL 但页面没有

Question

我的 ma​​in.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)
    });

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

我的组件文件 EventsTable.vue 文件中的 router-link sn-p 具有以下内容：

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

感谢任何帮助。谢谢

Answer 1

vue-turbolinks 包的第一行声明：

⚠️ 如果您使用 vue-router 或其他 Javascript 路由库，则不需要使用 Turbolinks 或此适配器。 Turbolinks 旨在通过在后台加载新页面来升级传统的请求-渲染周期，并且此适配器使得可以在以这种方式渲染的页面上使用 Vue 组件。如果您决定使用单页应用程序，那么您已经拥有了所需的一切。 ?

您不能同时使用vue-router 和 Turbolinks。 Turbolinks 处理您所有的网站导航。使用vue-router 导航不起作用，因为它试图进行历史推送而不是整个页面加载。

我建议使用Turbolinks.visit() 函数而不是vue-router 以编程方式路由。您需要为加载 vue 组件的 EventForm 页面创建一个新视图。