Question

我有一个非画布菜单，一旦使用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代码？

1 个答案: