Vue.js通过导航卫士重定向到时重定向

Question

我有一条受保护的路由，用户登录后即可访问。我想做的是，一旦他单击div，就将其重定向到主页，目前不起作用，因为我得到了这两个错误：

import React from "react";
import { Typeahead } from 'react-bootstrap-typeahead';
import ReactDOM from 'react-dom';
import options from './stocklist';

import 'react-bootstrap-typeahead/css/Typeahead.css';
import './styles.css';


export default class addWatchlistForm extends React.Component {
  state = {
    taskName: ""
  };

  checkEnterKey(e){
    console.log('checkEnterKey')
    var keyCode = e.which || e.keyCode;
    if(keyCode == 13){
      console.log('checkEnterKey')
      if(this.state.taskName.trim() !== ""){
          this.props.newTask(this.state.taskName)
      }
    }
  };

  updateTaskName = e => {
    console.log(e);   
    this.setState({ taskName: e.length > 0 ? e[0].ticker : "" });
    console.log('updateTaskName')

  };

  updateTask = e => {
    this.setState({taskName: e.target.value})
    console.log('updateTask')
    
  };

  handleAddTask = e => {
    let name = e.target.value;
    if (this.state.taskName.trim() !== "")
      this.props.newTask(name);
      console.log('handleAddTask')
      this.setState({ taskName: '' });
  };

  buttonAddTask = e =>{
    let name = e.target.value
    if(this.state.taskName.trim() !== "")
      this.props.newTask(this.state.taskName)
      this.state.taskName = "";
      this.setState({ taskName: e.length > 0 ? e[0].ticker : "" });
      console.log(this.state.taskName)
      console.log('buttonAddTask')
  };

  emptyInput = () => {
    this.setState({ taskName: '' });
    console.log('empty input')
  };

  render() {
    return (
      <div className="row">
        <div className="col-md-6 col-md-offset-3">
          <div style={{ margin: "20px" }}>
            <div className="row">
              <div className="col-md-6">
                <Typeahead
                  id="my-typeahead-id"
                  placeholder=""
                  onChange={this.updateTaskName}
                  onOptionSelected={this.handleAddTask, this.emptyInput}
                  value={this.state.taskName}
                  onKeyDown={e => this.checkEnterKey(e), this.emptyInput}
                  labelKey={option =>
                    `${option.ticker} ${option.security_type} `
                  }
                  options={options}
                />
              </div>
              <div className="col-md-4">
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={this.buttonAddTask}
                  onKeyPress={e => this.checkEnterKey(e)}
                >
                  Add New...
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  };
};

Error: Redirected when going from "/captables" to "/home" via a navigation guard.

我在做错什么导致该错误，我该如何解决？

这是我的index.js：

RangeError: Maximum call stack size exceeded

我尝试将下一个更改为import firebase from "firebase/app"; import "firebase/auth"; import Multibaas from '../components/MultibaasExample.vue' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'Login', component: Login }, { path: '/home', name: 'Home', component: Home }, { path: '/unauthorized', name: 'Unauthorized', component: Unauthorized }, { path: '*', component: NotFound, name: 'NotFound', }, { path: '/multibaas', name: 'Multibaas', component: Multibaas }, { path: '/captables', name: 'CapTables', component: CapTables, meta: { requiresAuth: true }, }, ], mode: 'history' }) router.beforeEach((to, from, next) => { const currentUser = firebase.auth().currentUser const requiresAuth = to.matched.some(record => record.meta.requiresAuth) if(requiresAuth && !currentUser) next('/') else if (!requiresAuth && currentUser) next('home') else next() }); export default router ，但这并没有太大作用。

这是我的html：

router push

和我的重定向功能：

      <md-button class="view-captable-btn" v-for="item in capTables" :key="item.contractAddress" 
        @click="navigateAway"> 
        <p>{{item.label}}</p>
        <p class="contract-address-p"> {{item.contractAddress}}</p>
       </md-button>

这里是navigateAway() { this.$router.push('/home') } 堆栈：

console.log