vue前端登录成功跳转首页
时间: 2023-09-08 14:13:23 浏览: 47
在登录成功后,可以使用`vue-router`进行页面跳转,具体操作如下:
1. 在`router/index.js`中定义路由:
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/login',
name: 'Login',
component: Login
}
]
})
```
2. 在登录成功后,通过`$router.push()`方法跳转到首页:
```
// Login.vue
<template>
<div>
<h1>Login page</h1>
<form>
<!-- login form -->
<button @click.prevent="login">Login</button>
</form>
</div>
</template>
<script>
export default {
methods: {
login() {
// login logic
// if login success, navigate to home page
this.$router.push('/')
}
}
}
</script>
```
在以上代码中,`this.$router.push('/')`会跳转到定义好的首页路由`/`。