I finished to create the user register form.
After the sign up method is done, I want the page to redirect back to home.
Now I installed vue-router with vue CLI command.
First, I put the router method after this.$store.dispatch('signUpUser', signUpData) as the code below. But I couldn't make it.
So I put this.$router.push({name: "Home"}) after jobsDone action, because I have a vuex file.
I also tried this.$router.replace('/').
But still I cannot solve this issue.
Register.vue
<template>
<div>
<img src="../img/svg/Mangosteen.png" alt="">
<Navbar />
<b-card
class="register-card"
>
<form action="" @submit.prevent="onSignUp">
<div>
<b-form>
<p class="mt-3 text-center register-title">Register</p>
<b-form-input
id="input-1"
v-model="fullname"
type="text"
required
placeholder="fullname"
class="mt-5 input"
name="fullname"
v-validate="'required'"
:class="{ 'mt-5 input': errors.has('fullname') }">
>
</b-form-input>
<p v-show="errors.has('fullname')" class="validate text-center">{{ errors.first('fullname') }}</p>
<b-form-input
id="input-2"
v-model="phone"
type="tel"
required
placeholder="phone number"
class="mt-5 input"
name="phone number"
v-validate="'required'"
:class="{ 'mt-5 input': errors.has('phone number') }">
>
</b-form-input>
<p v-show="errors.has('phone number')" class="validate text-center">{{ errors.first('phone number') }}</p>
<b-form-input
id="input-3"
v-model="email"
type="email"
required
placeholder="Email"
class="mt-5 input"
name="email"
v-validate="'required|email'"
:class="{ 'mt-5 input': errors.has('email') }">
>
</b-form-input>
<p v-show="errors.has('email')" class="validate text-center">{{ errors.first('email') }}</p>
<b-form-input
id="input-4"
v-model="password"
type="password"
required
placeholder="Password"
class="mt-5 input"
name="password"
v-validate="'required|min:6'"
:class="{ 'mt-5 input': errors.has('password') }"
></b-form-input>
<p v-show="errors.has('password')" class="validate text-center">{{ errors.first('password') }}</p>
<error-bar :error="error"></error-bar>
</b-form>
<b-button class="registerbutton-color" type="submit" v-show="show" @click="click">Register</b-button>
<div v-if="busy">
<b-button class="registerbutton-color" type="submit" :disabled="busy">
<spring-spinner
:animation-duration="3000"
:size="27"
color="#ff1d5e"
class="loading"
/>
</b-button>
</div>
</div>
</form>
</b-card>
</div>
</template>
<script>
import Navbar from "@/components/Navbar.vue";
import ErrorBar from '@/components/ErrorBar'
import { SpringSpinner } from 'epic-spinners'
export default {
data() {
return {
fullname: '',
phone: '',
email: '',
password: '',
show: true
}
},
components: {
ErrorBar: ErrorBar,
Navbar: Navbar,
SpringSpinner
},
methods: {
click() {
this.show = !this.show
},
onSignUp () {
this.$validator.validateAll()
.then(result => {
if(result){
const signUpData = {
fullname: this.fullname,
phone: this.phone,
email: this.email,
password: this.password
}
this.$store.dispatch('signUpUser', signUpData)
}
})
// .then(() => {
// this.$router.push({name: "Home"})
// })
},
jobsDone () {
this.removeErrors()
this.$router.push({name: "Home"})
//this.$router.replace('/')
},
removeErrors () {
this.$validator.reset()
this.$store.commit('clearError')
}
},
computed: {
error () {
return this.$store.getters.error
},
busy () {
return this.$store.getters.busy
},
jobDone () {
return this.$store.getters.jobDone
},
},
watch: {
jobDone(value) {
if(value) {
this.$store.commit('setJobDone', false)
this.jobsDone
}
}
}
}
</script>
This is my router/index.js file. The redirect page name is 'Home' and the path is '/'.
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Pro from '../views/Pro.vue'
import Products from '../views/Products.vue'
import Profile from '../views/Profile.vue'
import UserGroup from '../views/UserGroup.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/user-group',
name: 'UserGroup',
component: UserGroup
},
{
path: '/pro',
name: 'Pro',
component: Pro,
// meta: { requiresAuth: true },
children: [
{
path: '/products',
name: 'Products',
component: Products
},
{
path: '/profile',
name: 'Profile',
component: Profile,
},
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
I used in the default App.vue, and Pro.vue for admin user. App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
Pro.vue
<template>
<div>
<b-navbar toggleable="lg" type="dark" class="position-navbar">
<b-navbar-brand class="navbar" to="/">NavBar</b-navbar-brand>
<b-navbar-toggle class="navbar" target="nav-collapse">open</b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav >
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item to="/profile" class="menu-padding"><span class="color">My information</span></b-nav-item>
<b-nav-item to="/products" class="menu-padding"><span class="color">Sell surprise bags</span></b-nav-item>
<b-nav-form>
<b-button size="md" class="my-2 my-sm-0 logout-color m-4" type="submit">Log out</b-button>
</b-nav-form>
</b-navbar-nav>
</b-collapse>
</b-navbar>
<!-- sidebar-content -->
<main class="page-content">
<router-view/>
</main>
<!-- page-content" -->
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.position-navbar {
top: 0;
position: absolute;
width: 100%;
z-index: 1100;
right: 0;
background: #5A3005;
}
.navbar {
color: white;
}
.menu-padding {
padding-right: 7rem;
}
a.nav-link {
padding: 0.3rem;
}
.color {
color: white;
font-size: 14px;
}
.logout-color {
border-radius: 27px;
width: 150px;
height: 40px;
color: white;
background: linear-gradient(85deg, #aa233a, #aa233a, 60%, #472958);
border: none;
}
</style>
I hope you help me out.
