vue跳转页面 如果登录了直接跳转 没有登录登录完以后直接跳转，使用vuex管理登录状态

在Vue.js中，如果你需要在用户登录后重定向到他们原本想要访问的页面，你可以使用Vue Router的beforeEach守卫来实现这个功能。以下是实现这一需求的步骤：

1. 存储目标路由：在用户被重定向到登录页面之前，存储他们想要访问的路由。

2. 登录成功后重定向：在用户登录成功后，从存储的目标路由中读取并重定向用户。

3. 使用next函数：在Vue Router的全局守卫中使用next函数来实现重定向。

下面是具体的实现示例：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import Login from './components/Login.vue'
import store from './store' // 假设你使用的是Vuex进行状态管理

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    // ...其他路由
  ]
})

router.beforeEach((to, from, next) => {
  const isLoggedIn = store.state.isLoggedIn; // 从Vuex获取登录状态
  if (!isLoggedIn && to.path !== '/login') {
    // 如果用户未登录且尝试访问非登录页，重定向到登录页，并带上目标路由
    next({
      path: '/login',
      query: { redirect: to.fullPath } // 将目标路由作为查询参数传递
    })
  } else if (isLoggedIn && to.path === '/login') {
    // 如果用户已经登录且访问登录页，重定向到首页或目标路由
    next({
      path: from.query.redirect || '/' // 从查询参数中获取目标路由，如果没有则重定向到首页
    })
  } else {
    next() // 允许访问
  }
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// Login.vue
<template>
  <div>
    <!-- 登录表单 -->
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    login() {
      // 假设这是登录的API调用
      axios.post('/api/login', {
        // 用户名和密码
      }).then(response => {
        if (response.data.success) {
          // 登录成功，更新Vuex状态
          this.$store.commit('setLoggedIn', true);
          // 重定向到目标路由
          const redirect = this.$route.query.redirect || '/';
          this.$router.push(redirect);
        } else {
          // 登录失败，显示错误信息
          alert('Login failed');
        }
      });
    }
  }
};
</script>

在这个示例中，我们使用了Vuex来管理登录状态，但如果你的应用中没有使用Vuex，你可以使用其他方式来存储和更新登录状态，比如使用localStorage或者cookie。

请注意，示例中的/api/login是假设的后端API端点，你需要根据你的实际后端API进行替换。此外，示例中的setLoggedIn是一个假设的Vuex mutation，你需要根据你的Vuex store实现来替换。