Vue Маршрутизатор: Перенаправление на домашнюю страницу после завершения регистрации - PullRequest
Новая
       89

Vue Маршрутизатор: Перенаправление на домашнюю страницу после завершения регистрации

0 голосов
/ 04 августа 2020

Я закончил создание формы регистрации пользователя.

После завершения метода регистрации я хочу, чтобы страница перенаправлялась обратно на главную.

Теперь я установлен vue -router с командой vue CLI.

Сначала я помещаю метод маршрутизатора после этого. $ store.dispatch ('signUpUser', signUpData) как код ниже. Но у меня не получилось.

Поэтому я поставил это. $ Router.pu sh ({name: "Home"}) после действия jobsDone, потому что у меня есть файл vuex.

Я тоже пробовал это. $ Router.replace ('/').

Но все равно не могу решить эту проблему.

Зарегистрируйтесь. 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>

Это мой роутер / index. js файл. Имя страницы перенаправления - «Домашняя», а путь - «/» .

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

Я использовал в приложении по умолчанию. vue и Pro. vue для администратора. Приложение. 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>

Надеюсь, вы мне поможете.

Ответы [ 2 ]

0 голосов
/ 04 августа 2020

вы должны написать мета-функцию beforeResolve для маршрута регистрации следующим образом. 

{
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      beforeResolve(routeTo, routeFrom, next) {
        // If the user is already logged in
        if (store.getters['auth/loggedIn']) {
          // Redirect to the home page instead
          next({ name: 'home' })
        } else {
          // Continue to the login page
          next()
        }
      },
    },
  }

этот шаблонный код может вам помочь.

0 голосов
/ 04 августа 2020

Попробуйте как 

this.$router.push("/")
...