如何使用 Vuex 操作中的 vue 路由器进行导航
How to navigate using vue router from Vuex actions
我正在使用 Vue 2.x 和 Vuex 2.x 创建一个网络应用程序。我正在通过 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: Cannot read property 'push' of undefined
如何实现。
模拟 JsFiddle:here
import router from './router'
并使用router.push
就这么简单
您似乎没有将路由器注入您的应用,因此 'undefined'
在以前版本的 vue-router 中,您会:Vue.use(VueRouter)
,在 2.0 中,您可以将路由器注入应用程序,如下所示:
const routes = [
{ path: '/foo', component: Foo },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router // inject the router
}).$mount('#app')
这应该会在整个应用程序中以 this.$router
的形式提供
在回答相关问题后: Vuex 似乎不会在 this.$router
接收到路由器实例。因此,建议使用两种方法来提供对路由器实例的访问。
第一个更直接,涉及为实例设置全局 webpack。
第二个涉及将 Promises 与您的 vuex 操作一起使用,这将允许您的组件在 Promise 解析/拒绝操作之后利用它们对路由器实例的引用。
这个例子可能对你有帮助。
main.js
import Vue from "vue";
import VueRouter from "vue-router";
...
Vue.use(VueRouter);
export const router = new VueRouter({
mode: 'hash',
base: "./",
routes: [
{ path: "/", component: welcome},
{ path: "/welcome", component: welcome},
]
})
actions.js
import {router} from "../main.js"
export const someAction = ({commit}) => {
router.push("/welcome");
}
我不喜欢将应用程序的位置状态与应用商店中的其他应用状态分开,并且不得不同时管理路由器和应用商店,因此我创建了一个管理位置状态的 Vuex 模块在商店里。
现在我可以通过调度操作进行导航,就像任何其他状态更改一样:
dispatch("router/push", {path: "/error"})
这有一个额外的好处,可以使动画页面转换等事情更容易处理。
推出您自己的 router
模块并不难,但如果您愿意,也可以试试我的:
初始答案
在main.js
(第一个,我们"install"所有模块并创建Vue
实例,即src/main.js
):
const vm = new Vue({
el: '#app',
router,
store,
apolloProvider,
components: { App },
template: '<App/>'
})
export { vm }
这是我的例子,但在我们的例子中最重要的是 const vm
和 router
在你的store
中:
import { vm } from '@/main'
yourMutation (state, someRouteName) {
vm.$router.push({name: someRouteName})
}
P.S。使用 import { vm } from '@/main'
我们可以访问 Vuex
中所需的任何内容,例如 vm.$root
是 bootstrap-vue
.
的某些组件所需要的
P.P.S。似乎我们可以在加载所有内容时使用 vm
。换句话说我们不能在someMutation
里面使用vm
以防万一,如果我们在mounted()
里面调用someMutation
,因为mounted()
comes/occurs在[=之前24=] 已创建。
新答案
Constantin 的(公认的)比我的好,所以只是想向新手展示如何实现它。
内部核心目录(在我的例子中是 /src
内部),在 App.vue
、main.js
和其他 router.js
旁边,内容为:
import Vue from 'vue'
import Router from 'vue-router'
// Traditional loading
import Home from '@/components/pages/Home/TheHome'
// Lazy loading (lazy-loaded when the route is visited)
const Page404 = () => import(/* webpackChunkName: "Page404" */ '@/components/pages/404)
const Page503 = () => import(/* webpackChunkName: "Page503" */ '@/components/pages/503)
Vue.use(Router)
const router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
linkExactActiveClass: 'active',
routes: [
{
path: '*',
name: 'Page404',
component: Page404
},
{
path: '*',
name: 'Page503',
component: Page503
},
{
path: '/',
name: 'Home',
component: Home
},
// Other routes
{....},
{....}
]
})
// Global place, if you need do anything before you enter to a new route.
router.beforeEach(async (to, from, next) => {
next()
})
export default router
将我们的路由器导入到 main.js
:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
const vm = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
export { vm }
最后,在你的组件、Vuex 或其他任何地方 import router from './router'
做任何你需要的,比如 router.push(...)
您可以像这样简单地从路由器目录导入路由:
import router from '@/router'
router.push({name: 'Home'})
这个@符号替换了src目录的路径
我正在使用 Vue 2.x 和 Vuex 2.x 创建一个网络应用程序。我正在通过 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: Cannot read property 'push' of undefined
如何实现。
模拟 JsFiddle:here
import router from './router'
并使用router.push
就这么简单
您似乎没有将路由器注入您的应用,因此 'undefined'
在以前版本的 vue-router 中,您会:Vue.use(VueRouter)
,在 2.0 中,您可以将路由器注入应用程序,如下所示:
const routes = [
{ path: '/foo', component: Foo },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router // inject the router
}).$mount('#app')
这应该会在整个应用程序中以 this.$router
的形式提供
在回答相关问题后:this.$router
接收到路由器实例。因此,建议使用两种方法来提供对路由器实例的访问。
第一个更直接,涉及为实例设置全局 webpack。
第二个涉及将 Promises 与您的 vuex 操作一起使用,这将允许您的组件在 Promise 解析/拒绝操作之后利用它们对路由器实例的引用。
这个例子可能对你有帮助。
main.js
import Vue from "vue";
import VueRouter from "vue-router";
...
Vue.use(VueRouter);
export const router = new VueRouter({
mode: 'hash',
base: "./",
routes: [
{ path: "/", component: welcome},
{ path: "/welcome", component: welcome},
]
})
actions.js
import {router} from "../main.js"
export const someAction = ({commit}) => {
router.push("/welcome");
}
我不喜欢将应用程序的位置状态与应用商店中的其他应用状态分开,并且不得不同时管理路由器和应用商店,因此我创建了一个管理位置状态的 Vuex 模块在商店里。
现在我可以通过调度操作进行导航,就像任何其他状态更改一样:
dispatch("router/push", {path: "/error"})
这有一个额外的好处,可以使动画页面转换等事情更容易处理。
推出您自己的 router
模块并不难,但如果您愿意,也可以试试我的:
初始答案
在main.js
(第一个,我们"install"所有模块并创建Vue
实例,即src/main.js
):
const vm = new Vue({
el: '#app',
router,
store,
apolloProvider,
components: { App },
template: '<App/>'
})
export { vm }
这是我的例子,但在我们的例子中最重要的是 const vm
和 router
在你的store
中:
import { vm } from '@/main'
yourMutation (state, someRouteName) {
vm.$router.push({name: someRouteName})
}
P.S。使用 import { vm } from '@/main'
我们可以访问 Vuex
中所需的任何内容,例如 vm.$root
是 bootstrap-vue
.
P.P.S。似乎我们可以在加载所有内容时使用 vm
。换句话说我们不能在someMutation
里面使用vm
以防万一,如果我们在mounted()
里面调用someMutation
,因为mounted()
comes/occurs在[=之前24=] 已创建。
新答案
Constantin 的
内部核心目录(在我的例子中是 /src
内部),在 App.vue
、main.js
和其他 router.js
旁边,内容为:
import Vue from 'vue'
import Router from 'vue-router'
// Traditional loading
import Home from '@/components/pages/Home/TheHome'
// Lazy loading (lazy-loaded when the route is visited)
const Page404 = () => import(/* webpackChunkName: "Page404" */ '@/components/pages/404)
const Page503 = () => import(/* webpackChunkName: "Page503" */ '@/components/pages/503)
Vue.use(Router)
const router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
linkExactActiveClass: 'active',
routes: [
{
path: '*',
name: 'Page404',
component: Page404
},
{
path: '*',
name: 'Page503',
component: Page503
},
{
path: '/',
name: 'Home',
component: Home
},
// Other routes
{....},
{....}
]
})
// Global place, if you need do anything before you enter to a new route.
router.beforeEach(async (to, from, next) => {
next()
})
export default router
将我们的路由器导入到 main.js
:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
const vm = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
export { vm }
最后,在你的组件、Vuex 或其他任何地方 import router from './router'
做任何你需要的,比如 router.push(...)
您可以像这样简单地从路由器目录导入路由:
import router from '@/router'
router.push({name: 'Home'})
这个@符号替换了src目录的路径