Vue报错:Uncaught RangeError: Maximum call stack size exceeded

Vue在页面修改保存后浏览器自动刷新控制台报错:

Uncaught RangeError: Maximum call stack size exceeded
    at hotAddUpdateChunk (bootstrap 27fb73d…:828)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:27)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)
    at webpackHotUpdateCallback (bootstrap 27fb73d…:28)

这是什么原因?

App.vue:

<template>
    <div id="app" class="container">
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li>
                    <router-link to="/home">home</router-link>
                </li>
                <li>
                    <router-link to="/message">message center</router-link>
                </li>
            </ul>
            <div class="user-info" v-show="isLogin">
                <label class="username">{{name}}</label>
                <span class="logout" @click="logout">Log out</span>
            </div>
            <div class="actions" v-show="!isLogin">
                <span @click="goLogin">sign in</span>&nbsp;&nbsp;|&nbsp;&nbsp; 
                <span @click="goRegister">sign up</span>
            </div>
        </nav>
        <div class="nav-content">
                <router-view :key="Date.now()"></router-view>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import service from './services/services';

    Vue.use(VueRouter);
    const router = new VueRouter();

    export default {
        data() {
            return {
                isLogin: false,
                name: localStorage.userName
            };
        },
        methods: {
            logout() {
                service.logout(localStorage.userName)
                    .then(data => {
                        this.isLogin = false;
                        localStorage.isLogin = false;
                        router.push({ path: '/home' });
                    })
                    .catch(err => console.log(err));
            },
            goLogin() {
                router.push({ path: '/login' });
            },
            goRegister() {
                router.push({ path: '/register' })
            }
        },
        watch: {
            $route(newVal, oldVal) {
                this.isLogin = JSON.parse(localStorage.isLogin);
                this.name = localStorage.userName;
            }
        },
        mounted() {
            localStorage.isLogin = localStorage.isLogin ? localStorage.isLogin : false;
            this.isLogin = JSON.parse(localStorage.isLogin);
        }
    }
</script>

main.js

import Vue from 'vue';
import VueRouter from'vue-router';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import App from './App';
import routerConfig from './routes/router.config';

Vue.use(VueRouter);
const router = new VueRouter({
    routes: routerConfig.routes
});

new Vue({
    el: '#app',
    router,
    render: h=>h(App)
});
阅读 28.3k
4 个回答

补充答案:
我是页面调用自定义组件时报这个错误,后来把引入的组件名字改了下,错误消失

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏