laravel-5 - Vue Router and Vuex

Question

I have 2 questions. 1. How can I catch undefined routes and redirect to 404 page? 2. How I can use Vuex actions to get data from api? I know that vuex mutations must be sync and actions async. But I can get data with mutations and can use then promise. but can't in actions or I do anything mistake. Please give me beautiful example for that(component type). I use vuex in laravel mix in Laravel project. Thanks...

Answer 1

一般来说，如果您在应用程序中定义所有路由，则不应获得未定义的路由。您可以在路由配置中定义重定向，如下所示：

[
    {
        path: 'admin/posts/list',
        name: 'post-list',
    },
    {
        path: 'admin/posts',
        redirect: 'admin/posts/list'
    }
]

// you can also redirect to a named route instead
// of a path like this:
{
    path: 'admin/posts',
    redirect: { name: 'post-list' }
}

如果您想做一个“全部捕获”来抓取任何不匹配的路径并重定向到您的 404 组件/视图，那么您可以这样做：

{
    path: '*',
    redirect: '/404'
}

确保它位于您的路线定义的底部作为最后一条路线，因为它将捕获其上方树中的任何路线。

至于您关于突变/操作的问题，异步 API 请求（例如从 API 获取数据）仅在您使用 Vuex.Taken 时的操作中发生，来自操作文档：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}