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

Question

我有一个关闭的 canvas 菜单，一旦使用 jQuery 单击 Vue 路由，它就会被绘制出来，如下所示：

$('.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
});

Answer 1

您应该允许路由来驱动您的组件，并在该组件中驱动 jQuery 行为。

import VueRouter from 'vue-router';

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

export default new VueRouter({
    routes
});

Order.vue

export default {
    mounted() {
        $('.order-drawer').show();
        $('body').toggleClass( 'order-drawer-open' );
    }
}

组件创建并挂载后，会显示抽屉。您无需再做任何事情。当 vue-router 路由到路由时，它将创建并安装组件，并且将调用您的 jQuery 函数。

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

how to execute jQuery code when route is visited?

javascript

vue.js

vue-router