有条件地加载 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 路由器。

即使在 PHP 甚至没有加载 router-view 的页面上，路由器仍然会激活。片段可见：

#/

我如何确保路由器仅在某些 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>';

this will out put <script>window.needRouter = true;</script> or <script>window.needRouter = false;</script> based on condition.

现在在你的 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 变量感到困惑，请发表评论。

有条件地加载 vue-router

Conditionally load vue-router

javascript

php

vue.js

vue-router

vuejs2