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>';

这将输出＆lt; script＆gt; window.needRouter = true;＆lt; / script＆gt; 或＆lt; script＆gt; window.needRouter = false;＆lt; / script＆gt; 基于条件。

现在在你的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

1 个答案: