Vue Router：注冊完成后重定向到主頁
[英]Vue Router: Redirect to home page after registration done
問題描述
我完成了創建用戶注冊表單。
注冊方法完成后，我希望頁面重定向回主頁。
現在我用 vue CLI 命令安裝了 vue-router。
首先，我將路由器方法放在 this.$store.dispatch('signUpUser', signUpData) 之后，如下代碼所示。 但是我做不到。
所以我把 this.$router.push({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>
這是我的 router/index.js 文件。 重定向頁面名稱為“主頁”，路徑為“/”。
索引.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
我在默認的 App.vue 和 Pro.vue 中使用管理員用戶。 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>
普羅威
<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>
我希望你能幫助我。
1 個解決方案
解決方案1
0 2020-08-04 06:11:31
我完成了創建用戶注冊表單。
注冊方法完成后，我希望頁面重定向回主頁。
現在我使用 vue CLI 命令安裝了 vue-router。
首先，我將路由器方法放在 this.$store.dispatch('signUpUser', signUpData) 之后，如下面的代碼。 但我做不到。
所以我把 this.$router.push({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 文件。 重定向頁面名稱為“Home”，路徑為“/”。
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
我在默認的 App.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 2020-08-04 11:13:41
你必須像這樣為你的注冊路由編寫一個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()
}
},
},
}
此樣板代碼可能對您有所幫助。
使用 Vue Router 重定向到頁面后如何重新獲取 apollo 查詢？
[英]How to refetch apollo query after i redirect to page with Vue Router?
未找到頁面和默認主頁總是重定向到主頁 - React Router
[英]Not found page and default home page always redirect to home - React Router
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.