如何更改路由器在Vue中状态更改时呈现的组件？答案

【问题标题】：How to change component rendered by router on state change in Vue?如何更改路由器在Vue中状态更改时呈现的组件？
【发布时间】：2021-04-11 18:36:06
【问题描述】：

我在 Vue 中设置了一个 Vuex 商店和路由器。根据此存储中的某个状态，我希望路由器为同一路径呈现不同的组件。以下是我的尝试。

在我的路由器中，我包含一个条件，即“如果用户已登录，则返回 Home，否则返回 Login”。

在我的Login 组件中，当用户成功登录时，我将我的loggedIn 状态（在Vuex 商店中）的值更改为true。我已经测试并且可以看到这个状态正在更新，但 Home 组件不会在此状态更改时呈现 - 它仍为 Login。

Login.vue

<template>
  <div className = "container">
    <div className = "sign-in">
        <div className = "inner-sign-in">
            <div className = "title-outer">
                <div className = "title-inner">
                    <h1 className = "reg-title title">Tweeter</h1>
                    <span className = "slogan">Twitter, but not as good.</span>
                </div>
            </div>
            <div className = "form-outer">
                <form className = "sign-in-form" v-on:submit="submitForm">
                    <input @input="updateUsername" type="text" id="username" name="username" placeholder="Username" required/><br/>
                    <input @input="updatePassword" type="password" id="password" name="password" placeholder="Password" required/><br/>
                    <input type="submit" value="Login"/>
                    <div className = "wrongCreds">Sorry, incorrect username or password.</div>
                </form>
                <a className = "register-but" to="/register">Create an Account</a>
                <span className = "guestButton">Continue as Guest &gt;</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
  import loginService from '../services/login.js'
  export default {
    name: 'Login',
    computed: {
      loggedIn() {
        return this.$store.getters.loggedIn
      }
    },
    methods: {
      updateUsername: function(event) {
        this.$store.commit('change', {
          name: "username",
          value: event.target.value
        })
      },
      updatePassword: function(event) {
        this.$store.commit('change', {
          name: "password",
          value: event.target.value
        })
      },
      async submitForm(e) {
        e.preventDefault()
        await loginService.login(this.$store.getters.username, this.$store.getters.password)
          .then(data => {
            console.log(data)
            this.$store.commit('change', {
              name: "loggedIn",
              value: true
            })
            console.log(this.$store.getters.loggedIn)
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  }
</script>

router.js

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

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { path: '/', component: function () {
            console.log(store.getters.loggedIn)
            if(store.getters.loggedIn) {
                return Home
            }
            else {
                return Login
            }
        }}
    ]
})

export default router

store.js

import { createStore } from 'vuex';

const store = createStore({
    state: {
        username: '',
        password: '',
        loggedIn: false
    },
    mutations: {
        change(state, theChange) {
            state[theChange.name] = theChange.value
        },
        arrayItemChange(state, theChange) {
            state[theChange.name][theChange.index] = theChange.value
        }
    },
    getters: {
        username: state => state.username,
        password: state => state.password,
        loggedIn: state => state.loggedIn
    }
})

export default store

【问题讨论】：

标签： vue.js vuex vue-router vuejs3

【解决方案1】：

最好的做法是使用Navigation Guards。

现在，为了加快速度，您需要设置 2 个导航守卫来检查用户是否经过身份验证。

index.js（路由器文件）

const ifNotAuthenticated = (to, from, next) => {
    if (!store.getters.loggedIn) {
        next();
        return;
    }
    next("/");
};

const ifAuthenticated = (to, from, next) => {
    if (store.getters.loggedIn) {
        next();
        return;
    }
    next("/login");
};

const routes =[
    {
        path: "/home",
        name: "Home",
        component: Home,
        beforeEnter: ifAuthenticated,
      },
    {
        path: "/login",
        name: "Login",
        component: Login,
        beforeEnter: ifNotAuthenticated,
      }
]

beforeEnter 这里是了解经过身份验证的用户是否应该进入下一页或登录的关键。

【讨论】：

【解决方案2】：

将路由配置为简单地具有 /home 和 /login（不要在此处创建逻辑）并在您的模板或 Vuex 中处理登录：router.push() 到正确的路径，以匹配您的路由。

【讨论】：

【解决方案3】：

解决此问题的方法之一是拥有一个包含 Login 和 Home 组件的父组件，然后使用 Dynamic 组件根据状态进行切换。

你可以查看Vue文档here

【讨论】：