vue登录成功后跳转页面

在Vue中实现登录成功后跳转页面，需要经过以下几个步骤。

1. 创建登录页组件和目标页组件

首先，我们需要创建一个登录页的组件（LoginPage.vue）和一个登录成功后跳转到的目标页的组件（HomePage.vue）。

在LoginPage.vue组件中，我们可以编写和登录相关的逻辑，包括输入用户名和密码、点击登录按钮等。在登录成功后，我们可以使用`this.$router.push('/home')`来跳转到目标页。

2. 创建路由配置

在Vue项目的路由配置文件（router/index.js）中，我们需要添加两个路由，一个是登录页的路由，另一个是目标页的路由。

```

import LoginPage from '@/components/LoginPage.vue';

import HomePage from '@/components/HomePage.vue';

const routes = [

{

path: '/login'

name: 'login'

component: LoginPage

}

{

path: '/home'

name: 'home'

component: HomePage

}

];

const router = new VueRouter({

routes

});

export default router;

```

3. 在登录页中处理登录逻辑

在LoginPage.vue组件中，我们可以使用Vue的表单绑定和事件处理来实现登录逻辑。例如，我们可以使用`v-model`指令来绑定用户名和密码的输入框的值：

```

```

在上面的代码中，我们定义了`login`方法，在点击登录按钮时调用该方法。在登录成功后，我们使用`this.$router.push('/home')`来进行页面跳转。

4. 添加导航守卫

为了确保用户必须登录后才能访问目标页，我们可以在路由配置文件中添加导航守卫。

在router/index.js中的`router`实例上添加`beforeEach`方法，用于在每次路由切换前进行验证：

```

router.beforeEach((to

from

next) => {

const isLoggedIn = // 判断用户是否已登录，例如从localStorage中获取登录状态

if (to.name !== 'login' && !isLoggedIn) {

next({ name: 'login' }); // 如果未登录且访问的不是登录页，则跳转到登录页

} else {

next(); // 已登录或访问的是登录页，则正常跳转

}

});

```

在上述代码中，我们通过判断用户是否已登录来决定是否进行跳转。如果用户未登录且访问的不是登录页，则跳转到登录页；否则，则继续正常跳转。

5. 在App.vue中配置路由视图

在App.vue组件中，我们需要使用``组件来显示当前路由对应的组件。

```

```

在上述代码中，我们将``组件放在了``中，以实现路由视图的切换。