Vue js在路由器视图上丢失jquery效果

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得前端开发更加高效和可维护。Vue.js提供了一个灵活的路由器（Vue Router）来管理应用程序的不同视图。

在使用Vue.js的路由器视图时，如果丢失了jQuery效果，可能是由于以下几个原因：

依赖加载顺序：Vue.js和jQuery都是JavaScript库，如果在加载jQuery之前加载了Vue.js，可能会导致jQuery效果丢失。解决方法是确保jQuery在Vue.js之前加载。
DOM更新问题：Vue.js使用虚拟DOM来管理视图更新，而jQuery通常直接操作实际的DOM元素。如果在Vue.js更新DOM后再使用jQuery操作DOM，可能会导致jQuery效果丢失。解决方法是在Vue.js更新DOM后重新初始化jQuery效果。
Vue.js的事件绑定：Vue.js使用自己的事件绑定机制，而不是直接使用jQuery的事件绑定。如果在Vue.js的路由器视图中使用了jQuery的事件绑定，可能会导致事件无法触发。解决方法是使用Vue.js的事件绑定机制，或者在Vue.js的生命周期钩子函数中初始化jQuery事件。

总结起来，为了在Vue.js的路由器视图上保持jQuery效果，需要注意依赖加载顺序、DOM更新时机和事件绑定机制。同时，建议使用Vue.js的官方推荐的插件或组件来替代jQuery的功能，以充分发挥Vue.js的优势。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
视频点播（VOD）：https://cloud.tencent.com/product/vod
音视频处理（MPS）：https://cloud.tencent.com/product/mps

Vue js在路由器视图上丢失jquery效果

javascript、jquery、vuejs2

我正在尝试设置一个登录页面，然后是主面板，这是管理，我添加了一个路由器视图在主组件之间切换登录页面和主页的登录操作这种情况会使主页丢失下拉效果、数据表和许多jquery操作，但是当我将主组件设置为主页时/static/plugins/jquery/jquery.min.js', './static/plugins/datatables&#

浏览 22提问于2019-12-31得票数 0

1回答

Vue如何覆盖jQuery事件侦听器

jquery、vue.js

我读到过jQuery和Vue在一起工作得不太好。)。由于我有一个大型的jQuery应用程序，我正在逐步将Vue融入其中，我想了解引擎盖下面发生了什么，这样我就可以避免冲突了。/2.5.17/vue.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery&

浏览 2提问于2018-11-09得票数 0

回答已采纳

1回答

Vue-路由器抛出"ReferenceError: jQuery未定义“

jquery、vue.js、npm、vuejs2、vue-router

我正在设置一个新的vue项目，路由器在控制台中抛出以下错误消息：路由导航过程中路由器未登录错误：我检查了是否在jQuery文件中导入了*.vue :就是这样。</script>impor

浏览 0提问于2019-01-29得票数 0

1回答

在VueJS中，如何根据JS中填充的内容在视图中使用load？

javascript、vue.js、vuejs2

我是Vue.JS的新手，需要一点帮助，因为我被一些逻辑所困住了。我已经得到了一个项目的建设，因为我在保密协议下，我只能显示比较代码的例子。在使用路由器进入应用程序视区的one View (Bars)中，我有一个简单的for循环。JS文件中，我有这个(现在只有一个对象) { barPage: "views/bars&#x

浏览 0提问于2019-04-04得票数 0

3回答

Vue js路由器在遵循特定链接时如何打开页面

javascript、vue.js、vuejs2、vue-router

我正在学习Vue JS，我对路由器有问题，我希望在写页面地址时打开某些内容，例如" Home "，更确切地说，我有一个名为HomePage的组件，我想在url“Home”(例如)中打开这个组件，默认情况下App.vue <HomePage></HomePage>import HomePage from "@/Vi

浏览 8提问于2021-04-01得票数 0

4回答

如何使rails与vue.js一起工作？

javascript、ruby-on-rails、ruby、vue.js

我的问题很简单，如何使Rails应用程序与Vue.js一起工作？params[:controller] %>var Vue = require('vue');

浏览 6提问于2015-12-30得票数 9

回答已采纳

1回答

使用Vue和Laravel建立主题森林HTML模板。在router.push上加载JS文件不起作用

javascript、laravel、vue.js、vue-router

我正在建立我的第一个与Vue和Larvavel的前端网站。我在Themeforest上购买了基于html/css/javascript的模板。用laravel安装vue和vue路由器，所有这些看起来都很有用--这里是我的app.js文件import $ from 'jquery'; window.Vue = require(

浏览 0提问于2018-09-08得票数 2

2回答

在Vue项目中包含或初始化jQuery库的最佳方法是什么？

javascript、jquery、vue.js

在Vue项目中包含jQuery库的最佳方法是什么？我需要实现插件。这是基本的jQuery初始化。$(document).ready(function(){ $(&#x

浏览 2提问于2017-06-12得票数 4

回答已采纳

2回答

为什么webpack会包含依赖的node_modules？

javascript、typescript、webpack、vuejs2、lerna

我在同一个目录中有两个模块，都由lerna js管理。其中之一是其他模块包含的库。这两个包都是由webpack跟随着webpack的库编写的。但是，当我在应用程序目录中启动webpack时，该进程包含应用程序中的所有库/节点_模块依赖项，例如vue.js。在库中，vue是"devDependency“，而在应用程序中是"dependencies”。这意味着在导航器中有两个Vue上下文。有人知道为什么吗？谢谢。

浏览 1提问于2017-09-08得票数 1

1回答

Vue单元测试调整屏幕和更新DOM

vue.js、vuejs2、jestjs、vue-test-utils

/MyComponentApp.vue'; returnshallowMount(MyComponentApp, {}); let wrapper; beforeEachimage-container > img&#

浏览 1提问于2021-01-08得票数 2

回答已采纳

1回答

使用vue路由器的控制模块

javascript、modal-dialog、vuejs2、vue-router

我正在与Vue 2和VueRouter一起开发的项目中工作，我正在尝试使用由我的VueRouter控制的调制解调器！我做了下面的代码 <router-view v-if="!$el).modal('show') window.<e

浏览 5提问于2016-12-20得票数 25

4回答

我可以一起使用jQuery手机和Vue.js吗？

jquery-mobile、vue.js

我想将Vue.js与一些jQuery移动元素一起使用。是否有可能将这些框架混在一起？

浏览 2提问于2016-12-14得票数 1

回答已采纳

1回答

如何在vue js中使用其他插件

jquery、vue.js、metismenu

metisMenu是一个jQuery菜单插件，我知道它可以通过jQuery代码工作，但是当路由器在vue js中被更改时，如何让它工作呢？

浏览 2提问于2018-11-23得票数 0

回答已采纳

3回答

如何重定向到未找到的404页

vue.js、vue-router

Vue-路由器

浏览 5提问于2020-06-14得票数 0

回答已采纳

1回答

Vue路由器导航保护动态导入

javascript、vue.js、vuejs2、vue-component、vue-router

我希望动态地从组件文件导入数据到路由器文件，并根据导入数据的值允许next()。watch: { console.log(this.authenticated) //Outputs$router.push({name

浏览 4提问于2020-08-19得票数 1

回答已采纳

1回答

如何导入javascript文件以与Vue-Router一起使用

javascript、vue.js、vue-router

我想知道什么是正确的方式来导入javascript文件在我的整个Vue项目，也包括在组件，我用来做更改与Vue-路由器，我目前的问题是，我必须重新加载的组件，使Javascript被加载在每一个，也就是说，如果我改变路线，因此在每个组件中，Javascript功能只有当做F5时才能工作，路由器链接是不够的，我想这是因为我没有把它们包括在正确的方式中，路由器视图没有根据路由加载每个组件中的Javascript-- <e

浏览 22提问于2020-03-09得票数 0

回答已采纳

3回答

Vue.js路由器:在组件就绪时运行代码

javascript、vue.js、vue-router

我正在开发一个带有Vue.js及其官方路由器的单页应用程序。<template> }, }我想在组件完成转换后执行一段代码(初始化一个jQuery如果我将我

浏览 3提问于2016-07-14得票数 3

1回答

vue-路由器beforeRouteUpdate钩子无法访问“`this`”

javascript、vue.js

我正在使用vue-路由器构建一个Vue.js应用程序。 at step (vue-router.esm.js?fe87:1717) at step (vue-router.esm.js?fe87:1721)

浏览 1提问于2018-06-28得票数 1

回答已采纳

1回答

Vue网站在除索引之外的所有页面上返回"Cannot Get /path“

node.js、vue.js、amazon-ec2、amazon-cloudfront、vue-router

我正在使用Node.js上的Vue在亚马逊网络服务EC2实例上托管我的网站。我没有索引路由器文件，只有vue- node.js文件。我使用亚马逊网络服务CloudFront将我的证书绑定到我的流量。我的路由器：import Router from 'vue-router'; import VueCookies from '

浏览 29提问于2019-07-28得票数 0

回答已采纳

2回答