我正在使用Vue 2.x和Vuex 2.x创建一个Web应用程序。我正在通过http调用从远程位置获取一些信息,我希望如果该调用失败,我应该重定向到其他页面。
GET_PETS: (state) => {
return $http.get('pets/').then((response)=>{
state.commit('SET_PETS', response.data)
})
},
error => {this.$router.push({path:"/"}) }
)
}
字符串
但是this.$router.push({path:"/"})
给了我以下错误。
Uncaught(in promise)TypeError:无法读取未定义的属性“push”
如何才能做到这一点。
模拟JsFiddle:here
6条答案
按热度按时间az31mfrm1#
只要你从应用中的某个地方导出路由器示例(例如
./router.js
),你就可以将其import
用于任何你想要的地方-包括Vuex商店:字符串
在这里,您可以使用
router.push()
。就这么简单。
55ooxyrt2#
这个例子可以帮助你。
main.js
字符串
actions.js
型
gojuced73#
初始答案
在
main.js
中(我们“安装”所有模块并创建Vue
示例,即src/main.js
):字符串
这是我的例子,但在我们的例子中,最重要的是
const vm
和router
在您的
store
中:型
P.S.使用
import { vm } from '@/main'
,我们可以访问Vuex
中需要的任何内容,例如bootstrap-vue
的某些组件需要的vm.$root
。P.P.S.似乎我们可以在加载所有内容时使用
vm
。换句话说,我们不能在someMutation
中使用vm
,如果我们在mounted()
中调用someMutation
,因为mounted()
在vm
创建之前出现。新的答案
Constantin的answer(公认的)比我的好,所以只是想为新手展示如何实现它。
核心目录内(在我的情况下
/src
内),旁边的App.vue
,main.js
和其他我有router.js
的内容:型
将我们的路由器导入
main.js
:型
最后,在您的组件或Vuex或其他任何地方
import router from './router'
中,执行您需要的任何操作,例如router.push(...)
qoefvg9y4#
它看起来像你没有注入你的路由器到你的应用程序,因此它是'未定义'
在之前版本的vue-router中,你可以:
Vue.use(VueRouter)
,在2.0版本中,你可以像下面这样将路由器注入到应用程序中:字符串
这将使它在整个应用程序中作为
this.$router
可用在回答了一个相关的问题:如何从Vuex状态使用Vue Router?Vuex似乎不会接收
this.$router
的路由器示例。因此,建议使用两种方法来提供对路由器示例的访问。第一个更直接,它涉及到为示例设置一个webpack全局。
第二个涉及使用Promises与您的vuex操作,这将允许您的组件在操作Promise resolving / rejecting之后使用它们对路由器示例的引用。
i86rm4rw5#
我不喜欢将我的应用的位置状态与应用商店中的其他应用状态分开,并且必须同时管理路由器和应用商店,所以我创建了一个Vuex模块来管理应用商店中的位置状态。
现在我可以通过调度操作来导航,就像任何其他状态更改一样:
字符串
这有一个额外的好处,使动画页面过渡等事情更容易处理。
运行自己的
router
模块并不难,但如果你想的话,你也可以试试我的:https://github.com/geekytime/vuex-router
gblwokeq6#
您可以简单地从路由器目录导入路由,如下所示:
字符串
此**@**符号替换src目录的路径