如何用Vue.js修复Ruby on Rails中的“不工作的Turbolinks重定向”

Question

在我的登录页面上，没有通过Turbolinks重定向。

此页使用表单进行登录。在发布表单正确信息后，浏览器最终转到原始页面。

我正在用Ruby on Rails和Vue.js实现登录页面。

在加载时，我使用Turbolinks，所以我也做了Vue.js插件vue-turbolinks。

Rails: 5.2.2

拼音: 2.5.1

Turbolinks: 5

vue-turbolinks: 2.0.4

webpacker: 3.5

user_controller.rb

# coding: utf-8
class UsersController < ApplicationController

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      flash[:success] = "registing user data"
      redirect_to '/'
    else
      flash[:danger] = "invalid info"
      redirect_to '/signup'
    end
  end

  private
    def user_params
      params.require(:user).permit(:user_name, :email, :password, :password_confirmation)
    end

new.html.erb

<h1>Add</h1>
</div>
<%= javascript_pack_tag 'new' %>
<div>

new.vue

<template>
  <form accept-charset="UTF-8">
    <input type="text" v-model="username" placeholder="username">
    <input type="text" v-model="email" placeholder="email">
    <input type="password" v-model="password" placeholder="password">
    <input type="password" v-model="password_confirm" placeholder="password(confirm)">
    <button type="submit" v-on:click="sendForm">send</button>
  </form>
</template>

<script>
import axios from 'axios';

const token = document.getElementsByName("csrf-token")[0].getAttribute("content");
axios.defaults.headers.common["X-CSRF-Token"] = token;
axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["charset"] = "utf-8";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

export default {
  data: function() {
    return {
      username: "",
      email: "",
      password: "",
      password_confirm: ""
    }
  },
  methods: {
    sendForm: function(e){
      axios.post("/signup", {
        "user": {
          "user_name": this.username,
          "email": this.email,
          "password": this.password,
          "password_confirmation": this.password_confirm,
        }
      })
      .then(response => { 
      })
      .catch(response => {
      });
    }
  }
}
</script>

new.js

import Vue from 'vue';
import New from '../new.vue';
import TurbolinksAdapter from 'vue-turbolinks';

Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {
    const el = document.body.appendChild(document.createElement('new'));
    const new_ = new Vue({
        el,
        render: h => h(New)
    });

    console.log('/new page');
});

我期望在加载后，浏览器转到正确注册的根页面。

Answer 1

/vueturbo.js

 if (typeof(Vueturbo) === 'undefined') {
       Vueturbo = {};
    }

    Vueturbo.Dispatcher = function() {
       this.dispatch = function() {
          var elements = $('.sjs');
          var cls, meth;

          $(elements).each(function (index, element) {
             tokens  = $(element).attr('data-cls').split('.');
             meth    = $(element).attr('data-method') || 'fire';
             context = window;

             $(tokens).each(function(tidx, token) {
                context = context[token];
             });

             cls = new (context)();
             cls[meth]();
          });
       };

       this.turbolinks = function() {
          var ref = this;
          document.addEventListener('turbolinks:load', function() {
            ref.dispatch();
          });
       };
    };

将标记和调度程序调用插入到模板中../views/layout/public.html.erb

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script charset="utf-8">(new Vueturbo.Dispatcher()).turbolinks();</script>
...
<%= yield %>
...

插入调用所需js的标记../views/public/new.html.erb

<%= hidden_field_tag nil, 'new', class: 'sjs', 'data-cls': 'Vueturbo.new' %>

/new.js

import Vue from 'vue';
import New from '../new.vue';
import TurbolinksAdapter from 'vue-turbolinks';

Vue.use(TurbolinksAdapter);

Vueturbo.new = function() {
  this.fire = function() {
    const el = document.body.appendChild(document.createElement('new'));
    const new_ = new Vue({
        el,
        render: h => h(New)
    });
  }
}