Cómo navegar usando el enrutador vue desde Vuex acciones
Estoy creando una aplicación web con Vue 2.x y Vuex 2.x. Estoy buscando alguna información de una ubicación remota a través de una llamada http, quiero que si esa llamada falla debo redirigir a alguna otra página.
GET_PETS: (state) => {
return $http.get('pets/').then((response)=>{
state.commit('SET_PETS', response.data)
})
},
error => {this.$router.push({path:"/"}) }
)
}
Pero this.$router.push({path:"/"}) me da el siguiente error.
Uncaught (in promise) TypeError: Cannot read property 'push' of undefined
Cómo se puede lograr esto.
Simulated JsFiddle: aquí
4 answers
import router from './router'
Y use router.push
Así de simple.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-02 10:52:51
Parece que no está inyectando su enrutador en su aplicación, por lo tanto, es 'indefinido'
En versiones anteriores de vue-router lo haría: Vue.use(VueRouter), con 2.0 puede inyectar el enrutador en la aplicación como se muestra a continuación:
const routes = [
{ path: '/foo', component: Foo },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router // inject the router
}).$mount('#app')
Esto debería hacerlo disponible como this.$router en toda la aplicación
Después de responder a una pregunta relacionada: Cómo usar el enrutador Vue desde el estado Vuex? parece que Vuex no recibirá la instancia del router en this.$router. Por lo tanto dos métodos se sugirió proporcionar acceso a la instancia del router.
El primero es más directo, lo que implica establecer un paquete web global para la instancia.
El segundo implica el uso de Promesas con su acción vuex que permitiría a sus componentes utilizar su referencia a la instancia del enrutador después de las acciones Prometer resolver / rechazar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:11
Este ejemplo puede ayudarte.
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},
]
})
Acciones.js
import {router} from "../main.js"
export const someAction = ({commit}) => {
router.push("/welcome");
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-24 15:31:37
No me gustaba mantener el estado de ubicación de mi aplicación separado del resto del estado de mi aplicación en la Tienda, y tener que administrar tanto un enrutador como una Tienda, así que creé un módulo Vuex que administra el estado de ubicación dentro de la Tienda.
Ahora puedo navegar enviando acciones, al igual que cualquier otro cambio de estado:
dispatch("router/push", {path: "/error"})
Esto tiene el beneficio adicional de hacer que cosas como las transiciones de página animadas sean más fáciles de manejar.
No es difícil rodar su propio módulo router , pero también puedes probar el mío si quieres:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-30 13:52:57