vue3如何能让登录后跳转主页

在 Vue 3 中，你可以使用 Vue Router 来实现登录后跳转到主页的功能。下面是一个简单的示例：

首先，确保你已经安装了 Vue Router，可以使用以下命令进行安装：

npm install vue-router

接下来，在你的项目中创建一个名为 `router.js` 的文件，并添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true // 添加一个标记，表示需要登录后才能访问的路由
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 添加导航守卫
router.beforeEach((to, from, next) => {
  const loggedIn = localStorage.getItem('loggedIn') // 假设你使用 localStorage 来保存登录状态
  if (to.matched.some(record => record.meta.requiresAuth) && !loggedIn) {
    // 如果需要登录且未登录，则重定向到登录页面
    next('/login')
  } else {
    next()
  }
})

export default router

在上面的代码中，我们定义了两个路由，一个是主页的路由 `/`，另一个是登录页面的路由 `/login`。其中，主页的路由添加了一个 `meta` 属性，用来标记需要登录后才能访问。

在 `router.beforeEach` 中，我们使用导航守卫来检查用户是否已登录。如果用户访问需要登录的路由但未登录，则会被重定向到登录页面。

接下来，在你的应用程序的入口文件（通常是 `main.js`）中引入 `router.js` 并将其应用于 Vue 实例：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

现在，你可以在需要登录的组件中使用 `<router-link>` 来跳转到主页，例如：

<template>
  <div>
    <h1>主页</h1>
    <p>欢迎登录！</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  // ...
}
</script>

在其他地方，你可以使用 `$router.push()` 方法来编程式地跳转到主页：

// 在登录成功后调用
this.$router.push('/')

这样，当用户登录成功后，就会自动跳转到主页。如果用户未登录或尝试直接访问主页，则会被重定向到登录页面。