【Vue】路由配置：访问根目录死循环；

一、问题

1.1、环境
电脑环境：Windows 10；
开发工具：VScode；
JDK环境: Jdk1.8；

1.2、问题
【Vue】搭建项目是，进入首页，报错：

Error in beforeCreate hook: “RangeError: Maximum call stack size exceeded”

二、解答

从明面上看，是hook钩子 创建之前的错误，范围错误，执行了最大次数的调用链；

刚开始没感觉出来，后来看到出错的地方，才反应过来是死循环；
出错的原因是：
原路由：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "index",
      redirect: "/"
    },

    {
      path: "/demo1",
      name: "demo1",
      component: () => import("@/views/demo1")
    },
    {
      path: "/demo2",
      name: "demo2",
      component: () => import("@/views/demo2")
    }
  ]
});

修复后的路由：

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "index",
      redirect: ""
    },

    {
      path: "/demo1",
      name: "demo1",
      component: () => import("@/views/demo1")
    },
    {
      path: "/demo2",
      name: "demo2",
      component: () => import("@/views/demo2")
    }
  ]
});

看出是哪里的区别了么，就是：

      path: "/",
      name: "index",
      redirect: "/"

如果用户访问根目录，那么会被这个路由拦截，然后转发给根目录，然后就死循环了；直接把redirect的值从【/】改成空即可；

完毕~

三、总结

欢迎关注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公众号：幕桥社区

知乎：张牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
简书： https://www.jianshu.com/u/02c0096cbfd3