条件付きロードVUE-ルータ私はそうのように私の主なVUEインスタンス上で私のルータを設定しています

Question

：

router.js：

const router = new VueRouter({ 
    routes: [] 
}); 

メインVueのインスタンス：

import router from '@/router'; 

window.app = new Vue({ 
    el: '#vue', 

    router, 

    // etc. 
}); 

今、私はこのVueインスタンスがどこでも設定されているPHPアプリケーションの中で実行しています.Vueコンポーネントを使用しているからです場所の上に置く。

ルーターは私が数ページだけで使用するものです。私はVue Javascriptのルータを持つことができるようにしたい特定のPHPページだけがあります。

router-viewがロードされていないPHPページでも、ルータはまだアクティブになっています。

#/ 

ルーターが特定のPHPルート（つまり話す）でのみ起動することを確認するにはどうすればよいですか？

Answer 1

ページにグローバル変数を追加できます。あなたはルータが必要かどうかを定義します。私はあなたがあなたのPHPコードでそれを識別できると仮定します。

php側からは、条件trueまたはflaseに基づいてこのようなことを書くことができます。

// you can set this variable as per your need 
$needRouter = false; 

その後、任意のテンプレートエンジンは、（例えば、我々は小枝を使用）テンプレートにして、この変数を渡し、その場合は、あなたのHTMLテンプレート

内部

<script> 
    window.needRouter = {{ needRouter }}; 
</script> 

か、コアのPHP

を使用することを好む場合

echo '<script>window.needRouter = ' . ($needRouter ? 'true' : 'false') . ';</script>'; 

<スクリプト> window.needRouter = true; < /スクリプト>または<スクリプト> window.needRouter = false; < /スクリプト>に基づいています。あなたのmain.js

import router from '@/router'; 

let vueOptions = { 
    el: '#vue', 
    // we will not assign route here 
    // etc. 
}; 

if(window.needRouter) { 
    // we will assign route here if window.needRoute is true 
    vueOptions.router = router; 
} 

window.app = new Vue(vueOptions); 

あなたは、PHPからJS変数を設定する方法任意の混乱がコメントしてください場合

内部今

。