首页 文章

有条件地加载vue-router

提问于
浏览 次
3

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

router.js:

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

Main Vue instance:

import router from '@/router';

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

    router,

    // etc.
});

现在我在PHP应用程序中运行它，这个Vue实例在任何地方设置，因为我在整个地方使用Vue组件 .

路由器是我只用于几页的东西 . 我希望只有某些PHP页面可以拥有Vue Javascript路由器 .

即使在甚至没有加载 router-view 的PHP页面上，路由器仍然会激活 . 片段可以看到这一点：

#/

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

javascript php vue.js vuejs2 vue-router

1 回答

  • 6

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

    if any confusion how you set js variable from php please comment.

    回复于

相关问题