前提・実現したいこと
フロントをVue.js, サーバーをrailsで開発しています。
v-btnタグの登録ボタンをクリックしてregisterメソッドが成功したときに
this.$router.push({ name: 'LoginIndex' })
というコードでログインページに遷移させたいのですが、
URLが /register?に飛んでしまいます
画像
該当のソースコード
javascript/pages/register/index.vue
<template> <div id="register-form" class="form-wrapper"> <div class="form-card"> <div class="register">ユーザー登録</div> <ValidationObserver class="form-input" v-slot="{ handleSubmit }"> <form> <ValidationProvider name="メールアドレス" rules="required|email" v-slot="{ errors }"> <v-text-field id="email" v-model="user.email" :error-messages="errors" label="メールアドレス" required ></v-text-field> </ValidationProvider> <ValidationProvider name="パスワード" rules="required|min:8" v-slot="{ errors }"> <v-text-field ref="password" id="password" v-model="user.password" :error-messages="errors" label="パスワード" required :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'" :type="show1 ? 'text' : 'password'" @click:append="show1 = !show1" ></v-text-field> </ValidationProvider> <ValidationProvider name="パスワード(確認)" rules="required|min:8" v-slot="{ errors }"> <v-text-field id="password_confirmation" v-model="user.password_confirmation" :error-messages="errors" label="パスワード(確認)" required :append-icon="show2 ? 'mdi-eye' : 'mdi-eye-off'" :type="show2 ? 'text' : 'password'" @click:append="show2 = !show2" > </v-text-field> </ValidationProvider> <v-btn type="submit" width="18%" color="primary" @click="handleSubmit(register)">登録</v-btn> <v-btn width="18%" color="red" dark @click="clear">消去</v-btn> </form> </ValidationObserver> <div class="login-link"> <router-link to="/login">ログインはこちらから</router-link> </div> </div> </div> </template> <script> export default { name: "RegisterIndex", data() { return { show1: false, show2: false, user: { email: '', password: '', password_confirmation: '' } } }, methods: { handleShowRegisterAlert(){ this.isVisibleRegisterAlert = true; }, register() { this.$axios.post('users', { user: this.user }) .then(res => { this.$router.push({ name: 'LoginIndex' }) }) .catch(err => { console.log(err) }) }, clear () { this.user.email = '' this.user.password = '' this.user.password_confirmation = '' this.$refs.observer.reset() }, }, } </script>
javascript/router/index.js
import Vue from 'vue' import Router from 'vue-router' import store from '../store' import ItemIndex from '../pages/item/index' import RegisterIndex from '../pages/register/index' import LoginIndex from '../pages/login/index' import DeleteListIndex from '../pages/delete_list/index' import NotFound from '../components/shared/NotFound' Vue.use(Router) const router = new Router({ mode: 'history', routes: [ { path: '/', component: ItemIndex, name: 'ItemIndex', meta: { requiredAuth: true }, }, { path: '/register', component: RegisterIndex, name: 'RegisterIndex', }, { path: '/login', component: LoginIndex, name: 'LoginIndex', }, { path: '/delete-list', component: DeleteListIndex, name: 'DeliteListIndex', meta: { requiredAuth: true } }, { path: '*', component: NotFound, name: 'NotFound' } ], }) router.beforeEach((to, from, next) => { store.dispatch('users/fetchAuthUser').then((authUser) => { if (to.matched.some(record => record.meta.requiredAuth) && !authUser) { next({ name: 'LoginIndex' }); } else { next(); } }) }); export default router
ご教授お願いします
あなたの回答
tips
プレビュー