質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

3回答

600閲覧

[Vue]beforeRouteEnterにてpluginを使いたい

gigosa

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2019/03/07 02:35

前提・実現したいこと

ルーティングが解決される前にサーバからデータを取得してその間はローディング画面を出したいと思っています。

該当コード

ローディング画面を出せるようなプラグインは作成したのですが、beforeRouteEnterにてそれを使用する際はthisが使えないので

vue

1import Vue from 'vue'; 2... 3 4beforeRouteEnter(route, redirect, next) { 5 Vue.prototype.$plugin.open(); 6 ... 7 next(); 8}

上記のようにVueをimportして使用しています。

beforeRouteEnterでpluginを使用したい場合は上記のようにVueをインポートする以外の方法はないでしょうか?

その他

pluginのソースコードはおおよそ以下のようになっています。

js

1import Component from '@/component'; 2 3class Plugin { 4 constructor(Vue, options) { 5 this.Vue = Vue; 6 this.options = options; 7 this.Vm = {}; 8 } 9 10 open() { 11 let Loading = this.Vue.extend(Component); 12 let node = document.createElement('div'); 13 document.querySelector('body').appendChild(node); 14 this.Vm = new Loading(); 15 this.Vm.$mount(node); 16 } 17 18 close() { 19 this.Vm.$destroy(); 20 let elem = this.Vm.$el; 21 elem.remove(); 22 } 23} 24 25Plugin.install = function (Vue, options) { 26 Vue.prototype.$plugin = new Plugin(Vue, options); 27}; 28 29export default Plugin;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

https://router.vuejs.org/ja/api/#router-app

route.app

router が注入される root の Vue インスタンス

にアクセスできるようなので、route.app.$plugin.open()は効きませんか?

やってみてはいないので確証はないですけれども。

投稿2019/04/30 21:28

otolab

総合スコア763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gigosa

2019/05/16 08:43

ありがとうございます。 その後結局ルーティングが解決する前にapiの戻り値をもらうことをやめました。 なので元のコードは消してしまって確認ができないのですが、もし今後同じようなことがあれば実践して見たいと思います。 ご回答いただきありがとうございました。
gigosa

2019/11/18 10:21

今更ですが、上記の方法でVueインスタンスにアクセスできました。 ありがとうございます。
guest

0

自己解決

beforeRouteEnterを使わない選択を取ったのでこちらの質問はクローズします。
最終的には

Vue

1async created() { 2 this.$plugin.open() 3 const hoge = await api('getHoge'); 4 this.hoge = hoge; 5 this.$plugin.close(); 6}

上記のようなコードに落ち着きました。

投稿2019/05/16 09:24

gigosa

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

vue router のナビゲーションガードの項にある通り、 next() のコールバックで vm にアクセスできます。
この場合であれば vm.$plugin.open() で機能しそうです。

https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%83%AB%E3%83%BC%E3%83%88%E5%8D%98%E4%BD%8D%E3%82%AC%E3%83%BC%E3%83%89

この beforeRouteEnter ガードは this へのアクセスはできないです。なぜならば、ナビゲーションが確立する前にガードが呼び出されるからです。したがって、新しく入ってくるコンポーネントはまだ作られていないです。

しかしながら、 next にコールバックを渡すことでインスタンスにアクセスすることができます。このコールバックはナビゲーションが確立した時に呼ばれ、コンポーネントインスタンスはそのコールバックの引数として渡されます。

beforeRouteEnter (to, from, next) { next(vm => { // `vm` を通じてコンポーネントインスタンスにアクセス }) }

投稿2019/04/30 17:02

machine_machine

総合スコア162

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

gigosa

2019/05/16 09:01 編集

ありがとうございます。 当時のコードでは確か、 ```Vue beforeRouteEnter(to, from, next) { Vue.prototype.$plugin.open(); api('getHoge').then( next(vm => { vm.setHoge(); Vue.prototye.$plugin.close(); }) ); } ``` のような形にしていたと思います。 ナビゲーションが確立される前にサーバからデータと取ってきて、その後の処理を行う方向性でコードを書いていました。 `next()`のコールバック内であれば$pluginにはアクセスできるとは思うのですが、その前に`$plugin.open()`を実行したかったので、今回の問題の解決には至らないかと思います。 いずれにせよご回答いただきありがとうございました。 また機会がありましたらよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問