Vue 路由器和 Vuex

Question

我有两个问题。 1.如何捕获未定义的路由并重定向到404页面？ 2. 如何使用 Vuex 操作从 api 获取数据？我知道 vuex 突变必须是同步的，动作必须是异步的。但是我可以获得带有突变的数据并且可以使用 then promise。但不能在行动中或我做任何错误。请给我一个漂亮的例子（组件类型）。我在 laravel mix in Laravel 项目中使用 vuex。谢谢...

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' }
}

如果你想做一个 "catch all" 抓取任何不匹配的路径并重定向到你的 404 component/view，那么你可以这样做：

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

确保它在你的路由定义的底部作为最后一条路由，因为它会捕获它上面的树中的所有路由。

至于你关于 mutations/actions 的问题，异步 API 请求比如从 API only every happen without actions 当你正在使用 documentation on actions:

中的 Vuex.Taken

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

Vue 路由器和 Vuex

Vue Router and Vuex

laravel-5

vuejs2

vue-router

vuex

laravel-mix