94

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:こちら

4

6 に答える 6

19

この例が役に立ちます。

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},

    ]
})

アクション.js

import {router} from "../main.js"

export const someAction = ({commit}) => {

    router.push("/welcome");
}
于 2016-12-14T08:59:30.710 に答える
11

ルーターをアプリに挿入していないように見えるため、「未定義」です

以前のバージョンの vue-routerVue.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 状態から Vue Router を使用するには? Vuex は でルーター インスタンスを受信しないようthis.$routerです。そのため、ルーター インスタンスへのアクセスを提供するために 2 つの方法が提案されました。

1 つ目はより直接的で、インスタンスにグローバルな webpack を設定する必要があります。

2 つ目は、vuex アクションで Promise を使用することです。これにより、Promise の解決/拒否のアクションに続いて、コンポーネントがルーター インスタンスへの参照を利用できるようになります。

于 2016-11-22T15:19:16.327 に答える