Question

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

我的 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片段具有以下内容：

<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 和 Turbolink。 Turbolinks处理您所有的网站导航。使用vue-router进行的导航无效，因为它试图进行历史记录推送而不是整个页面加载。

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

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

1 个答案: