vue2登录成功后跳转页面
时间: 2023-08-02 15:42:24 浏览: 43
在Vue2中,登录成功后跳转页面通常使用Vue Router实现。具体步骤如下:
1. 在路由配置文件中定义需要跳转的路由
```javascript
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. 在登录页面中,使用Vue Router的`$router.push()`方法进行跳转
```javascript
<template>
<div>
<h2>Login</h2>
<form @submit.prevent="login">
<label>
Email:
<input type="text" v-model="email" />
</label>
<label>
Password:
<input type="password" v-model="password" />
</label>
<button type="submit">Login</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
login() {
// 在这里进行登录操作,成功后跳转到首页
// 假设登录成功后返回一个token
const token = 'abc123'
localStorage.setItem('token', token)
this.$router.push('/')
}
}
}
</script>
```
3. 在需要进行登录验证的页面中,使用`beforeRouteEnter`钩子函数进行拦截
```javascript
<script>
export default {
beforeRouteEnter(to, from, next) {
const token = localStorage.getItem('token')
if (!token) {
// 如果没有token,则跳转到登录页面
next('/login')
} else {
next()
}
}
}
</script>
```
以上就是Vue2中登录成功后跳转页面的实现方法。