有條件地加載vue-router

Question

我正在我的主vue實例上設置我的路由器，如下所示：

router.js：

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

主Vue實例：

import router from '@/router';

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

    router,

    // etc.
});

現在我在一個PHP應用程序中運行它，這個Vue實例在任何地方設置，因為我在整個地方使用Vue組件。

路由器是我只用於幾頁的東西。 我希望只有某些PHP頁面可以擁有Vue Javascript路由器。

即使在甚至沒有加載路由器router-view PHP頁面上，路由器仍然會激活。 片段可以看到：

#/

我如何確保路由器僅在某些PHP路由上啟動（可以這么說）？

Answer 1

您可以將全局js變量添加到頁面。 這將定義您是否需要路由器。 我假設您可以通過PHP代碼識別它。

所以從php方面你可以根據條件true或flase寫出這樣的東西;

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

然后在你的html模板里面

如果它的任何模板引擎（例如我們使用twig）將此變量傳遞給模板

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

或者如果您更喜歡使用核心PHP

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

這將根據條件輸出<script> window.needRouter = true; </ script>或<script> window.needRouter = false; </ script> 。

現在在你的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變量請評論。