Ich erstelle eine Web-App mit Vue 2.x und Vuex 2.x. Ich rufe einige Informationen von einem entfernten Standort über einen http-Aufruf ab. Wenn dieser Aufruf fehlschlägt, sollte ich auf eine andere Seite umleiten.
GET_PETS: (state) => {
return $http.get('pets/').then((response)=>{
state.commit('SET_PETS', response.data)
})
},
error => {this.$router.push({path:"/"}) }
)
}
Aber this.$router.push({path:"/"})
gibt mir folgenden Fehler.
Nicht gefangen (im Versprechen) TypeError: Die Eigenschaft 'push' von undefined kann nicht gelesen werden
Wie kann dies erreicht werden?
Simulierte JsFiddle: hier
javascript
vue.js
vuex
Saurabh
quelle
quelle
Antworten:
import router from './router'
und verwenden
router.push
So einfach ist das.
quelle
Dieses Beispiel kann Ihnen helfen.
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}, ] })
action.js
import {router} from "../main.js" export const someAction = ({commit}) => { router.push("/welcome"); }
quelle
dispatch('someAction').then(() => this.$router.push('/welcome'))
Es sieht so aus, als würden Sie Ihren Router nicht in Ihre App einfügen, daher ist er "undefiniert".
In früheren Versionen von vue-router haben Sie:
Vue.use(VueRouter)
Mit 2.0 können Sie den Router wie folgt in die App einfügen:const routes = [ { path: '/foo', component: Foo }, ] const router = new VueRouter({ routes }) const app = new Vue({ router // inject the router }).$mount('#app')
Dies sollte es dann wie
this.$router
in der gesamten App verfügbar machenNach Beantwortung einer verwandten Frage: Wie verwende ich den Vue Router aus dem Vuex-Status? Es scheint, dass Vuex die Router-Instanz bei nicht empfängt
this.$router
. Daher wurden zwei Methoden vorgeschlagen, um den Zugriff auf die Router-Instanz zu ermöglichen.Die erste ist direkter, bei der ein globales Webpack für die Instanz festgelegt wird.
Die zweite Möglichkeit besteht darin, Promises mit Ihrer vuex-Aktion zu verwenden, mit der Ihre Komponenten ihren Verweis auf die Router-Instanz nach den Aktionen Promise auflösen / ablehnen können.
quelle
ERSTE ANTWORT
In
main.js
(dem, in dem wir alle Module "installieren" und eineVue
Instanz erstellen , dhsrc/main.js
):const vm = new Vue({ el: '#app', router, store, apolloProvider, components: { App }, template: '<App/>' }) export { vm }
Dies ist mein Beispiel, aber in unserem Fall ist das wichtigste hier
const vm
undrouter
In Ihrem
store
:import { vm } from '@/main' yourMutation (state, someRouteName) { vm.$router.push({name: someRouteName}) }
PS Mit können
import { vm } from '@/main'
wir auf alles zugreifen, was wir brauchenVuex
, zum Beispielvm.$root
was von einigen Komponenten von benötigt wirdbootstrap-vue
.PPS Es scheint, dass wir nur verwenden können,
vm
wenn alles geladen ist. Mit anderen Worten, wir könnenvm
inside nicht verwendensomeMutation
, falls wirsomeMutation
inside aufrufenmounted()
, damounted()
es vor dem Erstellen kommt / auftrittvm
.NEUE ANTWORT
Constantins Antwort (die akzeptierte) ist besser als meine, also möchte ich Anfängern nur zeigen, wie man sie umsetzt.
Innenkern dir (innen
/src
in meinem Fall), nebenApp.vue
,main.js
und andere , die ich haberouter.js
mit dem Inhalt: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
Importieren Sie unseren Router nach
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 }
Schließlich innerhalb Ihrer Komponente oder Vuex oder irgendwo anders
import router from './router'
und tun, was Sie brauchen, wie zrouter.push(...)
quelle
Ich mochte es nicht, den Standortstatus meiner App vom Rest meines App-Status im Store zu trennen und sowohl einen Router als auch einen Store verwalten zu müssen. Deshalb habe ich ein Vuex-Modul erstellt, das den Standortstatus im Store verwaltet.
Jetzt kann ich wie bei jeder anderen Statusänderung durch Auslösen von Aktionen navigieren:
dispatch("router/push", {path: "/error"})
Dies hat den zusätzlichen Vorteil, dass animierte Seitenübergänge einfacher zu handhaben sind.
Es ist nicht schwer, ein eigenes
router
Modul zu rollen , aber Sie können auch mein Modul ausprobieren, wenn Sie möchten:https://github.com/geekytime/vuex-router
quelle