有条件地加载vue-router

我正在主Vue实例上设置路由器，如下所示：
小精灵：

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

主Vue实例：

import router from '@/router';

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

    router,

    // etc.
});

现在，我在一个php应用程序中运行这个命令，因为我到处都在使用vue组件，所以这个vue实例在这个php应用程序中到处都是。
不过，路由器是我只用于几页的东西。我只希望某些php页面能够使用vue javascript路由器。
即使在未加载router-view的php页面上，路由器仍会激活。碎片可以看到：

#/

如何确保路由器只在某些php路由上启动（可以这么说）？

最佳答案：

您可以将全局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>';

这将根据条件输出或。
现在进入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变量有任何疑问，请发表评论。