Vue Router無法呈現正確的組件

Question

我在vue-router有一些嵌套的路由，可以在router.js找到router.js 。 但是，每次我登錄用戶時， Header的Query和Result鏈接始終呈現Register和Login組件，但是我可以通過通過vue開發人員工具進行調查來確認我的Vuex具有正確的令牌設置。

---

因此，我對vue-router期望如下：

1. 用戶嘗試登錄/user/login
2. 登錄成功，令牌已設置為Vuex狀態
3. 用戶被重定向到/
4. 用戶單擊/query或result鏈接， <router-view>呈現App.vue Query或Result組件。
5. 用戶單擊Logout按鈕， Vuex狀態被清除。
6. 用戶被重定向回/user/login 。

但是我得到的結果是：

1. 用戶嘗試登錄/user/login
2. 登錄成功，令牌已設置為Vuex狀態
3. 用戶被重定向到/
4. 用戶單擊App.vue /query鏈接， <router-view>呈現了Register組件。
5. 用戶單擊App.vue /result鏈接， <router-view>呈現了Login組件。
6. 用戶使用F5刷新頁面。
7. 用戶單擊/query或result鏈接， <router-view>呈現App.vue Query或Result組件。
8. 用戶單擊Logout按鈕， Vuex狀態被清除。
9. 用戶被重定向回/user/login 。
10. 用戶單擊App.vue呈現的“ Result組件中的“ Login按鈕， <router-view> 。

---

我嘗試過的

1. 刪除路由上的令牌保護， <router-view>仍無法呈現正確的組件。
2. 從所有<router-link>刪除v-if="auth" ，同時仍啟用令牌保護，問題似乎消失了。 但是我只想在用戶登錄時才呈現Query和Result ，反之亦然。
3. 使用v-show而不是v-if消除問題，但是我懷疑這是隱藏用戶鏈接的正確方法。
4. 命名所有路由，但問題仍然存在。

一些代碼

這是我的router.js

import User from './components/user/User'
import Home from './components/Home'
import Login from './components/user/Login'
import Register from './components/user/Register'
import Query from './components/Query'
import Result from './components/result/Result'
import List from './components/result/List'
import Display from './components/result/Display'

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

const router = [
    {
        path: '/', name: 'home', component: Home
    },
    {
        path: '/user', component: User, children: [
            {path: 'login', component: Login},
            {path: 'register', component: Register},
        ]
    },
    {
        path: '/query', name: 'query', component: Query
    },
    {
        path: '/result', component: Result, children: [
            {path: '', component: List},
            {path: ':token', component: Display}
        ]
    },
    {path: '*', redirect: '/'},
];

export default new VueRouter({
    routes: router,
    mode: 'history',
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        }
        if (to.hash) {
            return {selector: to.hash};
        }
        return {x: 0, y: 0};
    }
})

這是我的Header.vue

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="header">
        <a class="navbar-brand" href="#">CMAP</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <router-link to="/user/register" active-class="active" tag="li" v-if="!auth">
                    <a class="nav-link">Register</a>
                </router-link>
                <router-link to="/user/login" active-class="active" tag="li" v-if="!auth">
                    <a class="nav-link">Login</a>
                </router-link>
                <router-link to="/query" active-class="active" tag="li" v-if="auth">
                    <a class="nav-link">Query</a>
                </router-link>
                <router-link to="/result" active-class="active" tag="li" v-if="auth">
                    <a class="nav-link">Result</a>
                </router-link>
                <li @click="logout" class="nav-item" v-if="auth">
                    <a class="nav-link">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
</template>

<script>
    import * as  types from '../../stores/types'

    export default {
        methods: {
            logout() {
                // clear state.token and redirect user to '/user/login'
                this.$store.dispatch(types.ACTION_USER_LOGOUT);
            }
        },
        computed: {
            auth() {
                // return true if state.token is set in vuex
                return this.$store.getters[types.GETTER_IS_AUTHENTICATED]
            }
        }
    }
</script>

這是我的App.vue

<template>
    <div>
        <appHeader></appHeader>
        <div class="container">
            <router-view></router-view>
        </div>
        <appFooter></appFooter>
    </div>
</template>

<script>
    import Header from './components/layouts/Header'
    import Footer from './components/layouts/Footer'

    export default {
        components: {
            'appHeader': Header,
            'appFooter': Footer
        }
    }
</script>

這是我的store/store.js

import Vue from 'vue';
import Vuex from 'vuex';

import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        jwt: {
          token: null,
          expire: null
        },      
    },
    getters,
    mutations,
    actions,
});

這是我的store/actions.js

import * as types from './types';
import axios from '../axios';
import router from '../router'

export default {
    [types.ACTION_USER_LOGIN]: ({commit, dispatch}, payload) => {
        axios.post('/api/user/login/', {
            email: payload.email,
            password: payload.password,
        })
            .then(res => {
                if (Object.keys(res.data).length === 0 && res.data.constructor === Object) {
                    return
                }
                let payload = {
                    'token': res.data.token,
                    'expire': new Date(res.data.expire_on * 1000)
                };

                dispatch(types.ACTION_SET_TOKEN, payload);
                commit(types.MUTATE_UPDATE_JWT, payload);
                router.push('/')
            })
            .catch(error => {
                console.log(error);
            })
    },
    [types.ACTION_USER_REGISTER]: ({commit, dispatch}, payload) => {
        axios.post('/api/user/register/', {
            email: payload.email,
            password: payload.password
        }).then(res => {
            if (Object.keys(res.data).length === 0 && res.data.constructor === Object) {
                return
            }
            let payload = {
                'token': res.data.token,
                'expire': new Date(res.data.expire_on * 1000)
            };
            dispatch(types.ACTION_SET_TOKEN, payload);
            commit(types.MUTATE_UPDATE_JWT, payload);
            router.push('/')
        }).catch(error => {
            console.log(error);
        })
    },
    [types.ACTION_USER_LOGOUT]: ({commit, dispatch}) => {
        dispatch(types.ACTION_CLEAR_TOKEN);
        commit(types.MUTATE_CLEAR_AUTH);
        router.push("/user/login");
    },
    [types.ACTION_CLEAR_TOKEN]: () => {
        localStorage.removeItem('jwt_token');
        localStorage.removeItem('jwt_expire');
    },
    [types.ACTION_SET_TOKEN]: ({commit}, payload) => {
        localStorage.setItem("jwt_token", payload.token);
        localStorage.setItem("jwt_expire", payload.expire);
    }     
};

這是我的store/getters.js

import * as types from './types';

export default {
    [types.GETTER_IS_AUTHENTICATED]: state => {
        return state.jwt.token !== null
    }
};

這是我的store/mutations.js

從'./types'導入*作為類型；

export default {
    [types.MUTATE_UPDATE_JWT]: (state, payload) => {
        state.jwt = payload
    },
    [types.MUTATE_CLEAR_AUTH]: (state) => {
        state.jwt.token = null;
        state.jwt.expire = null;
    },
};

這是我的axios.js自定義實例

import {store} from './stores/store'
import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://127.0.0.1:8000',
    withCredentials: true
});

instance.interceptors.request.use(config => {
    if (store.state.jwt.token != null) {
        config.headers.common['Authorization'] = 'Bearer ' + store.state.jwt.token;
    }
    return config;
});

export default instance

我的store/types.js包含所有常量變量字符串，因此我認為沒有必要在此處包含。

如果需要提供有關此問題的更多信息，請告訴我。

Answer 1

通過為Header.vue每個router-link分配唯一的key ，我已經解決了該問題。 因此，修改后的最終Header.vue文件如下所示：

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="header">
        <a class="navbar-brand" href="#">CMAP</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <router-link to="/user/register" active-class="active" tag="li" v-if="!auth" key="link_reg">
                    <a class="nav-link">Register</a>
                </router-link>
                <router-link to="/user/login" active-class="active" tag="li" v-if="!auth" key="link_login">
                    <a class="nav-link">Login</a>
                </router-link>
                <router-link to="/query" active-class="active" tag="li" v-if="auth" key="link_query">
                    <a class="nav-link">Query</a>
                </router-link>
                <router-link to="/result" active-class="active" tag="li" v-if="auth" key="link_result">
                    <a class="nav-link">Result</a>
                </router-link>
                <li @click="logout" class="nav-item" v-if="auth">
                    <a class="nav-link">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
</template>

<script>
    import * as  types from '../../stores/types'

    export default {
        methods: {
            logout() {
                // clear state.token and redirect user to '/user/login'
                this.$store.dispatch(types.ACTION_USER_LOGOUT);
            }
        },
        computed: {
            auth() {
                // return true if state.token is set in vuex
                return this.$store.getters[types.GETTER_IS_AUTHENTICATED]
            }
        }
    }
</script>

似乎在每個v-if沒有相關的key的情況下，VueJS無法正確更新DOM，以用於router-link 。