vue设置默认登陆后界面

在 Vue 中设置默认登录后的界面可以通过路由守卫来实现。

1. 首先，在路由配置文件中定义一个路由守卫，用来验证用户是否登录。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('userToken');
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

2. 在需要验证登录的路由上添加 meta 属性，用来表示该路由需要登录验证。

{
  path: '/dashboard',
  name: 'Dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

3. 在登录成功后，将用户的 token 存储到本地存储中。

localStorage.setItem('userToken', token);

4. 在 App.vue 组件中，通过判断是否存在用户 token 来决定用户访问的默认界面。

<template>
  <div>
    <router-view v-if="isAuthenticated" />
    <Login v-else />
  </div>
</template>

<script>
import Login from './views/Login.vue';

export default {
  name: 'App',
  components: {
    Login
  },
  computed: {
    isAuthenticated() {
      return localStorage.getItem('userToken');
    }
  }
};
</script>

当用户未登录时，会默认跳转到登录界面，登录成功后会自动跳转到需要登录验证的路由界面。