Pertanyaan Cara menavigasi menggunakan vue router dari tindakan Vuex


Saya membuat aplikasi web dengan Vue 2.x dan Vuex 2.x. Saya mengambil beberapa informasi dari lokasi terpencil melalui panggilan http, saya ingin jika panggilan itu gagal saya harus mengarahkan ke beberapa halaman lain.

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.push({path:"/"}) }
  )
}

Tapi this.$router.push({path:"/"}) memberi saya kesalahan berikut.

Ketidakcocokan (dalam janji) TypeError: Tidak dapat membaca properti 'push' dari tidak terdefinisi

Bagaimana ini bisa tercapai.

Simulasi JsFiddle: sini


21
2017-11-22 08:16


asal


Jawaban:


import router from './router'

dan digunakan router.push

Sederhana seperti itu.


41
2017-11-22 08:23



Sepertinya Anda tidak menyuntikkan router ke aplikasi Anda, karena itu menjadi 'tidak terdefinisi'

Di versi sebelumnya vue-router Anda akan: Vue.use(VueRouter), dengan 2,0 Anda dapat menyuntikkan router ke dalam aplikasi seperti di bawah ini:

const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router // inject the router
}).$mount('#app')

ini seharusnya membuatnya tersedia sebagai this.$router di seluruh aplikasi


Mengikuti menjawab pertanyaan terkait: Bagaimana cara menggunakan Vue Router dari negara Vuex? nampaknya Vuex tidak akan menerima instance router di this.$router. Oleh karena itu dua metode disarankan untuk memberikan akses ke contoh router.

Yang pertama lebih langsung yang melibatkan pengaturan webpack global ke instance.

Yang kedua melibatkan menggunakan Janji dengan tindakan vuex Anda yang akan memungkinkan komponen Anda untuk memanfaatkan referensi mereka ke router contoh berikut tindakan yang Putuskan menyelesaikan / menolak.


7
2017-11-22 15:19



Contoh ini dapat membantu Anda.

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");
} 

4
2017-12-14 08:59



Saya tidak suka menyimpan status lokasi aplikasi saya terpisah dari negara bagian aplikasi lainnya di Store, dan harus mengelola Router dan Store, jadi saya membuat modul Vuex yang mengelola keadaan lokasi dalam toko.

Sekarang saya dapat menavigasi dengan mengirimkan tindakan, sama seperti perubahan negara lainnya:

dispatch("router/push", {path: "/error"})

Ini memiliki manfaat tambahan membuat hal-hal seperti transisi halaman animasi lebih mudah untuk ditangani.

Tidak sulit untuk menggulung milikmu sendiri router modul, tetapi Anda juga dapat mencoba milik saya jika Anda ingin:

https://github.com/geekytime/vuex-router


2
2018-03-30 13:52