Vue Router和Vuex

时间:2017-03-28 19:13:47

标签: laravel-5 vuejs2 vue-router vuex laravel-mix

我有2个问题。 1.如何捕获未定义的路由并重定向到404页面? 2.我如何使用Vuex动作从api获取数据?我知道vuex突变必须是同步和动作异步。但我可以获得有突变的数据,然后可以使用诺言。但不能在行动或我做任何错误。请给我一个漂亮的例子(组件类型)。我在Laravel项目的laravel mix中使用vuex。感谢...

1 个答案:

答案 0 :(得分: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'
}

确保它位于路由定义的最底部作为最后一条路由,因为它将捕获它上面的树中的所有路由。

关于突变/操作的问题,当您使用Vuex时,异步API请求,例如从API 中获取数据时只发生动作。来自documentation on actions

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