Question

我觉得我遗漏了一些非常明显的东西，但我无法弄清楚。请帮忙！我定义了以下路线：

const routes = [
  {
    path: '/',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: {
      authRedirect: true
    }
  },
  {
    path: '/companies',
    name: 'Companies',
    component: () => import('../views/Companies.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/companies/:id',
    name: 'Company',
    component: () => import('../views/Company.vue'),
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '*',
    name: '404',
    component: () => import('../views/404.vue')
  }
]

然后我的组件中有以下内容：

export default {
  name: 'Company',
  data() {
    return {
      company: {}
    }
  },
  methods: {
    getCompanyDetails: function() {
      let self = this
      axios.get('/api/companies/' + this.$route.params.id).then(function(response) {
        self.company = response.data
      }).catch(function() {
        self.$router.push('companies')
      })
    }
  },
  created() {
    this.getCompanyDetails()
  }
}

如果 API 返回数据，基本上一切正常，但在 catch 函数中，我试图将路由推回到 /companies。但它重定向到/companys/companys。如何将其重定向到正确的路线？

Answer 1

您是否尝试过 $router.push('/companies')（路径中有 /）？

此外，如果您想让它更清楚，您可以使用 $router.push({ name: 'Companies' })，它将匹配您的路线中定义的 name。

将路由推送到函数内的父组件（Vue）

1 个答案: