如何在访问路由时执行jQuery代码？

我有被画在一次Vue的路由使用jQuery，像这样点击关闭帆布菜单：如何在访问路由时执行jQuery代码？

$('.order-drawer').show(); 
$('body').toggleClass('order-drawer-open');

我的路线非常简单，显示如下：

<router-link to="/order" exact class="order-drawer-toggler"> 
    <a>Order Now</a> 
</router-link> 

<router-view></router-view>

现在，我如何确保在浏览器中查看http://test.dev/test/#/order时，那么我的jQuery调用正在执行？如何调用路由视图的onload函数？

编辑：我的路线文件看起来如下：

import VueRouter from 'vue-router'; 

let routes = [ 
    { 
     path: '/order', 
     component: require('./views/Order.vue') 
    } 
]; 

export default new VueRouter({ 
    routes 
});

来源

2017-07-18 Chris

什么组件在/ order下呈现？您可以在该组件的挂载（挂钩）中执行该操作，尽管混合使用jQuery和Vue可能会有点反作用，因为让Vue推动交互会更好。 –

检查[vuejs生命周期挂钩]（https://vuejs.org/v2/api/#Options-Lifecycle-Hooks） –

@DavidL我对Vue颇为陌生，并计划推动与它的交互，但我有当抽屉从侧面拉入时操作身体标签以添加一些CSS转换。我发现通过Vue没有这样做。我用我的路线文件更新了我的问题 – Chris

你应该让你的路由来驱动你的组件，并在该组件，驱动jQuery的行为。

import VueRouter from 'vue-router'; 

let routes = [ 
    { 
     path: '/order', 
     component: require('./views/Order.vue') 
    } 
]; 

export default new VueRouter({ 
    routes 
});

Order.vue

当创建部件和安装，它将显示抽屉。没有什么你需要做的。当vue-router路由到路由时，它将创建并挂载组件，并调用您的jQuery函数。

来源

2017-07-18 23:02:17

谢谢！即使现在询问我看到了解决方案，我也感到很尴尬。我正在看一个完全不同的方向。再次感谢！ – Chris

@克里斯不需要感到尴尬！基于状态的路由是对你的应用程序进行推理的一种不同的方式，需要改变一下心态。乐于帮助！ –

如何在访问路由时执行jQuery代码？

回答

相关问题