如何使用 Vue.js 在 Ruby on Rails 中修复“Turbolinks 重定向无效" [英] How to fix 'didn't work redirect by Turbolinks' in Ruby on Rails with Vue.js
本文介绍了如何使用 Vue.js 在 Ruby on Rails 中修复“Turbolinks 重定向无效"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的登录页面中，Turbolinks 无法重定向.
此页面使用表单登录.提交表单正确信息后，浏览器最终会转到原始页面.
我正在使用 Ruby on Rails 和 Vue.js 实现登录页面.
在加载时，我使用了Turbolinks，所以我也做了Vue.js插件vue-turbolinks.
导轨:5.2.2
红宝石:2.5.1
Turbolinks:5
vue-turbolinks:2.0.4
webpacker: 3.5
user_controller.rb
# 编码:utf-8类用户控制器 <应用控制器定义新@user = User.new结尾定义创建@user = User.new(user_params)如果@user.saveflash[:success] = "注册用户数据"重定向到/"别的flash[:danger] = "无效信息"redirect_to '/注册'结尾结尾私人的定义用户参数params.require(:user).permit(:user_name, :email, :password, :password_confirmation)结尾new.html.erb
添加
<%= javascript_pack_tag '新' %><div>
new.vue
<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></表单></模板><脚本>从 'axios' 导入 axios；const token = document.getElementsByName("csrf-token")[0].getAttribute("content");axios.defaults.headers.common["X-CSRF-Token"] = 令牌；axios.defaults.headers.common["Content-Type"] = "application/json";axios.defaults.headers.common["charset"] = "utf-8";axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";导出默认{数据:函数(){返回 {用户名: ""，电子邮件: ""，密码: ""，确认密码: ""}},方法: {发送表格:函数(e){axios.post("/注册", {用户":{"user_name": this.username,电子邮件":this.email，密码":this.password，"password_confirmation": this.password_confirm,}}).then(响应 => {}).catch(响应 => {});}}}new.js
从'vue'导入Vue；从'../new.vue'导入新的；从 'vue-turbolinks' 导入 TurbolinksAdapter；Vue.use(TurbolinksAdapter);document.addEventListener('turbolinks:load', () => {const el = document.body.appendChild(document.createElement('new'));const new_ = new Vue({埃尔，渲染:h =>h(新)});console.log('/新页面');});我希望在加载后，浏览器以正确的注册方式转到根页面.
解决方案
/vueturbo.js
if (typeof(Vueturbo) === 'undefined') {Vueturbo = {};}Vueturbo.Dispatcher = function() {this.dispatch = function() {var 元素 = $('.sjs');var cls, 甲基;$(elements).each(function (index, element) {token = $(element).attr('data-cls').split('.');meth = $(element).attr('data-method') ||'火';上下文 = 窗口；$(tokens).each(function(tidx, token) {上下文 = 上下文[令牌];});cls = 新(上下文)()；cls[甲基]();});};this.turbolinks = function() {var ref = this;document.addEventListener('turbolinks:load', function() {ref.dispatch();});};};在模板中插入标签和调度程序调用../views/layouts/public.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %><script charset="utf-8">(new Vueturbo.Dispatcher()).turbolinks();</script>...<%=产率%>...插入调用你想要的js的标签../views/public/new.html.erb
<%= hidden_field_tag nil, 'new', class: 'sjs', 'data-cls': 'Vueturbo.new' %>/new.js
从'vue'导入Vue；从'../new.vue'导入新的；从 'vue-turbolinks' 导入 TurbolinksAdapter；Vue.use(TurbolinksAdapter);Vueturbo.new = 函数(){this.fire = function() {const el = document.body.appendChild(document.createElement('new'));const new_ = new Vue({埃尔，渲染:h =>h(新)});}}In my sign in page, didn't work redirect by Turbolinks.
This page use form for sign in. After posting form correct information, browser end up going to original page.
I'm implementing sign in page with Ruby on Rails and Vue.js.
In loading, I use Turbolinks, so I did Vue.js plugin vue-turbolinks, too.
Rails: 5.2.2
Ruby: 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');
});
I expect the after loading, browser go to root page in correct registing.
解决方案
/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();
});
};
};
insert the tag and dispatcher callings in templates ../views/layouts/public.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<script charset="utf-8">(new Vueturbo.Dispatcher()).turbolinks();</script>
...
<%= yield %>
...
insert the tag calling the js that you want ../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)
});
}
}
这篇关于如何使用 Vue.js 在 Ruby on Rails 中修复“Turbolinks 重定向无效"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
