vue默认重定向导致最大堆栈错误

【问题标题】：vue default redirect causing maximum stack errorvue默认重定向导致最大堆栈错误
【发布时间】：2019-10-11 13:09:10
【问题描述】：

所以我的 vue-router 的这一部分导致了问题：

{
    component: Tutorial,
    name: "tutorial",
    path: "/tutorial/:page?",
    redirect: "/tutorial/0",
},

如果我删除重定向，问题就消失了。这条路线也没有孩子。不能指定默认参数值吗？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

因为"/tutorial/0" 也匹配"/tutorial/:page?"。

由于路由器配置是先进先出的，

你可以像这样定义你的路线

    {
      component: Tutorial,
      name: 'tutorial',
      path: '/tutorial/0'
    },
    {
      path: '/tutorial/:page?',
      redirect: '/tutorial/0'
    }

如果当前路由匹配/tutorial/0，它将渲染你的组件。如果不匹配/tutorial/0，Vue 将检查它是否匹配/tutorial/:page?，如果匹配则进行重定向。

【讨论】：

【解决方案2】：

如果您在redirect 部分设置了默认值。它将转到/tutorial/0，接下来它会一次又一次地重定向到/tutorial/0...

如果要设置默认参数值。您可以在Tutorial 组件中实现它。

例如：

// In Tutorial component
beforeRouteEnter() {
    this.$route.params.page = this.$route.params.page ? this.$route.params.page : 0
}

【讨论】：