如何让keep-alive在vue中工作？
在Vue中，keep-alive是一个内置组件，用于缓存和保留组件状态，以提高性能和用户体验。要让keep-alive在Vue中工作，可以按照以下步骤进行设置：
- 在需要缓存的组件外部包裹一个<keep-alive>标签，将需要缓存的组件放在<keep-alive>标签内部。
- 在需要缓存的组件中，可以通过设置<keep-alive>的属性来控制缓存行为。常用的属性有：
- include：指定需要缓存的组件名称，可以是字符串或正则表达式。
- exclude：指定不需要缓存的组件名称，可以是字符串或正则表达式。
- max：指定最大缓存组件实例数量。
- 例如，如果要缓存名为"ExampleComponent"的组件，可以这样设置：<keep-alive :include="'ExampleComponent'">。
- 在需要重新渲染缓存组件时，可以使用Vue的内置指令<component>来动态切换组件。通过给<component>设置不同的key值，可以触发组件的重新渲染。
- 例如，可以在父组件中使用<component :is="'ExampleComponent'" :key="componentKey">来动态切换并重新渲染名为"ExampleComponent"的组件。
需要注意的是，keep-alive只能缓存有状态的组件，即有数据交互或生命周期钩子的组件。对于无状态的组件，如纯展示型组件，使用keep-alive没有实际效果。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云容器服务（TKE）。
相关·内容
我想使用Vue-路由器，但是在DOM.中保留一个当前未使用的视图，类似于Vue的keep-alive，但是只是隐藏未使用的视图，而不是卸载它。
原因是，这个视图中有一个音频播放器，我想让它继续播放。在卸车时，它停止了。以下是当前的情况：
<!-- To keep the audio within the media player component running,
simply keep all components alive over route changes -->
<router-view v-slot="{ Component }">
浏览 2提问于2021-11-22得票数 0
回答已采纳
1回答
在我的主页中，我有两个组件。我只想让一个人活着。
HomeView.vue
<template>
<div>
<keep-alive>
<AliveComponent />
</keep-alive>
<DeadComponent />
</div>
</template>
在我的App.vue中，我也保持了<router-view />的活力
<template>
<Header />
<main>
浏览 6提问于2022-11-30得票数 0
我有个vue spa应用。我在创建的钩子中获取页面的数据
我的问题是，如果按下后退按钮，如何避免再次获取先前导航离开的页面的数据
编辑
我的应用程序是vue 3我后来使用了< keep-alive >，它可以工作，但即使在< keep-alive :max="2“>组件上使用最大属性也无法清除缓存
浏览 17提问于2021-02-16得票数 0
我想同时在transition，keep-alive，router-view中使用App.vue。我不想重复使用路由器的组件。
这是中的文档
在使用params路由时要注意的一点是，当用户从/ user /johnny导航到/user/jolyne时，相同的组件实例将被重用。
在Vue2.x中，我可以使用密钥来保持路由器的组件不被重用。
<transition>
<keep-alive>
<router-view :key="$route.fullPath" ></router-view>
</kee
浏览 3提问于2021-04-25得票数 2
回答已采纳
我正在使用一个名为'Stepper‘的组件，它是一个基本组件，在顶部有步骤来指导用户完成一个过程。在这个步骤中，我们有一个动态数量的插槽，我们传递一个组件来填充这个插槽。
Stepper.vue
...
<div v-for="step in steps" :key="step.name">
<div class="stepper-pane" v-if="step.name === currentItem.name">
<slot :name="`${step.name}`
浏览 7提问于2022-02-08得票数 0
回答已采纳
1回答
我有这样的Vue路由器：
export default new Router({
routes: [
{
path: '/',
name: 'Inbox',
component: Inbox
}]
})
在主要的app.vue中，我已经：
<div id="app">
<main>
<keep-alive include="Inbox">
<router-view></router-
浏览 2提问于2018-04-04得票数 5
回答已采纳
我有分页器的组件。在这个组件中，我有用于获取数据的beforeRouteEnter和beforeRouteUpdate。在浏览器中打开之后，我单击链接./pages/2./pages/3和beforeRouteUpdate获取数据并显示出来。当我点击链接./pages/1(这是第一条路径，beforeRouteEnter和他一起工作)浏览器转到这个链接，但是beforeRouteUpdate没有出现，我看到了旧页面的数据
我的路由器代码：
export default new Router({
mode: 'hash',
linkActiveClass: 'op
浏览 0提问于2018-05-12得票数 1
1回答
如何在vue中复制组件状态？
、、、、
我的目标是在我的vue.js应用程序中创建多个工作区，其中有许多表单。在切换工作区时，应保留该路由的状态(如未保存的表单输入)。
我试过像这样使用选项卡：
<tabs>
<tab name="W1">
This is the content of the first tab
</tab>
<tab name="W2">
This is the content of the second tab
</tab>
</tabs>
浏览 14提问于2020-09-25得票数 0
回答已采纳
问题所在 我有一个子组件，它可能存在于包含v-if的页面上，也可能不存在。当用户单击其他内容时，尝试将其缓存，以便无论我如何尝试使用<keep-alive>缓存，当用户返回时，搜索词和其他内容都会再次显示。 我尝试过的 documentation似乎表明，我所需要做的就是将组件包装在<keep-alive>标记中，这样就可以正常工作了。我尝试了匹配一些使用<component>标记的文档，但这显然不起作用。我也尝试过使用include属性，因为仅仅包装它是行不通的。 Vue.component('child', {
template
浏览 66提问于2020-01-20得票数 11
回答已采纳
这样做是可行的：
App.vue
<template>
<div id="app">
<keep-alive including="home">
<router-view />
</keep-alive>
</div>
</template>
router.vue
routes: [
{
path: "/",
name: "home",
component: homeView
浏览 0提问于2019-06-24得票数 0
我有一个Vue.js SPA，使用vue-路由器.因为在每个页面中登录后，需要保持状态(比如输入的过滤器/分页)，这是使用“保持活动”来完成的：
<keep-alive>
<router-view/>
</keep-alive>
这是很好的工作，但当有人注销和再次登录，我仍然看到相同的过滤器值，因为保持活着。
我是否可以在注销时以编程方式刷新/清除那些保持活动状态的页面？
浏览 6提问于2018-10-24得票数 7
回答已采纳
我在Vue js中的一个网络商店工作，当我添加产品时，我使用事件总线，然后通过事件总线将产品添加到CartComponent中。它可以工作，但是当我返回添加一个新产品或返回时，页面就会重新加载我的CartComponent中的所有数据。我怎么能这样做--它从来不删除它得到的数据？
我试图用
<keep-alive>
<CartComponent />
</keep-alive>
但这不管用。有人能告诉我如何这样做，组件，而不是删除数据时，我切换路由？
浏览 3提问于2019-03-11得票数 0
回答已采纳
2回答
我对vueJS很陌生，并且尝试动态加载组件。我在网上搜索，并尝试了许多建议，但仍然无法让它发挥作用。
场景:我希望有一个“shell”组件，它充当根据用户选择交换其他组件的容器。这些组件的文件名将从数据库中提供。
下面是shell组件：
<template>
<keep-alive>
<component :is='compName'></component>
</keep-alive>
</template>
<script>
props: [
浏览 3提问于2022-03-03得票数 0
3回答
在我的vue应用程序中，router-view中的一些特定组件是通过vue提供的<keep-alive></keep-alive>缓存的。
当用户登录到posts.vue组件时，就像我前面所说的那样被缓存。
一切都很好。
现在我要销毁，当用户再次登录时，当用户记录posts.vue组件重新呈现的out.So时，posts.vue组件。
注销按钮存在于完全其他组件menu.vue中，此nenu.vue组件中存在用于注销的单击逻辑。
那么如何使用vm.$destroy()方法从menu.vue组件在posts.vue组件上实现这一点呢？
因此，我的主要问题是如何从另一个控制
浏览 4提问于2017-04-07得票数 1
我在vue文件中使用了vuex store
// a.vue
// use mapGetters
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters({
appSize: "view/appSize"
})
}
}
// appSize is accessed elsewhere, and no actions operation
它工作正常
===============
但是当我扩展这个组件，并设置一个新的动态名称时
浏览 13提问于2021-05-25得票数 0
1回答
我想在Vue3中使用带有复合API的动态组件功能。我对Options没有问题。我遵循了这样的指令：
这是我的密码：
<script setup>
import { ref } from "vue";
import General from "../components/ContractGeneral.vue";
import Networks from "../components/ContractDetails.vue";
const tabs = {
General,
Networks,
};
let currentTab
浏览 10提问于2022-09-10得票数 0
回答已采纳
我在dist目录中构建了一个Vue JS应用程序。为了运行，我使用通过以下命令全局安装的http-server： npm install -g http-server 我使用以下命令运行应用程序： http-server dist 这样我就可以访问http://localhost:8080上的网站了，它工作正常。但在我的应用程序中，我有配置了历史模式的vue-router，所以我应该像http://localhost:8080/page1一样访问URL，但问题是http-server返回404： curl -i http://localhost:8080/page1
HTTP/1.1 40
浏览 38提问于2021-09-11得票数 1
回答已采纳
问题是如何在Vue组件中维护iframe的内容和状态，无论组件是显示还是隐藏。
我尝试了两种方法：
(1)与vue路由器结合使用。
<keep-alive>
<router-view>
<Component></Component>
</router-view>
</keep-alive>
(2)将其作为子组件，使用v-if代替vue-路由器显示和隐藏。
<Component v-if="$store.state.isShow"></Component>
这两种方法都
浏览 5提问于2018-07-09得票数 1
回答已采纳
在登录页面中，我有一个Google reCAPTCHA。它可以正常工作，但是如果我导航到另一个页面，然后通过浏览器的后退按钮返回，或者在浏览器中输入URL，所有东西都可以工作，除了上面说的reCAPTCHA。为了让它再次工作，我需要重新加载页面。在Vue中使用Materialize时，我得到了相同的结果。当返回页面时，组件不会“重置”。
尝试使用keep-alive (即使这听起来不对)，尝试了各种Vue生命周期钩子(created、beforeMount、mounted)，尝试将代码保存在一个函数中，然后在生命周期钩子中调用该函数。似乎什么都不起作用。我搜索了Google，甚至在这里，但可能
浏览 0提问于2019-07-20得票数 3
我有这样的导航组件：
<template>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<spa
浏览 6提问于2017-11-03得票数 6
回答已采纳
所期望的
我的视图中有一个选项卡导航，它会触发嵌套的router-views来显示。对于这些嵌套路由，我想应用淡出转换。我期望在mode out-in中实现转换，这样旧的router-view就会先消失，然后新的router-view就会消失。
发生了什么
只有out-in mode的内部转换才能工作:当单击导航选项卡时，旧的router-view消失而没有转换，但是新的router-view会根据需要逐渐消失。
当我在:key="$route.fullPath"中删除父router-view的App.vue属性(参见下面)时，嵌套转换工作得很好。但是由于我重复使用路由器组件，
浏览 7提问于2022-05-31得票数 1
我用的是Vue。当我在一个包含文本区域(充满文本)的页面上，并且我路由到一个设置页面(例如)时，当我返回到带有文本区域的页面时，我希望它滚动到相同的位置，而不是顶部。有没有什么方法可以让VueRouter不接触底层组件上的任何东西，甚至让文本和类似的内容滚动到同一位置？
我已经在使用Keepalive了，如下所示：
<keep-alive>
<router-view />
</keep-alive>
在设置页面上，我像这样返回：
$router.go(-1)
浏览 0提问于2020-12-06得票数 1
我试图在页面加载期间显示脉冲加载器。我从下面的代码中得到了两个错误。
App.vue
<template>
<div id="app">
<div id="nav">
<router-link to='/'><div v-if="$route.name=='home'" class='activeLink'>Home</div></router-link>
<pulse-lo
浏览 0提问于2019-06-20得票数 0
回答已采纳
3回答
我有一个相当大的vue.js 2应用程序，它具有动态选项卡机制。用户可以与应用程序打开和关闭选项卡进行交互，每个选项卡代表一个路由。为了实现这一点，我使用vue路由器并保持活力，如下面的示例。
<template>
<div id="app">
<keep-alive>
<router-view :key="routerViewKey"/>
</keep-alive>
</div>
</template>
当用户单击“关闭”选项卡按钮时，将调用
浏览 20提问于2020-12-06得票数 6
我只想在我的Nuxt.js应用程序中缓存一个组件。
<template>
<v-container>
<nuxt keep-alive :keep-alive-props={ include: ['pages/settings/games.vue'] } />
</v-container>
</template>
这似乎缓存了我在应用程序中的每一个页面。我只想缓存在include支柱中指定的单个页面。
如何使用keep-alive缓存单个页面
浏览 0提问于2022-10-13得票数 0
1回答
我有一个VuesJS视图，其中有两个具有main-detail关系的组件。用户可以单击main组件中的一项(该项将突出显示)，details组件将显示相关的详细项。
products.vue
<main></main>
<details>></details>
用户可以编辑详图项目，我希望使用包含编辑详图项目所需构件的单独视图进行编辑。
我希望用户能够以启动编辑操作时的状态导航回products.vue视图(例如，在完成编辑过程之后)。
我尝试将main和details分别包装在<keep-alive></keep-al
浏览 0提问于2020-07-21得票数 0
2回答
我正在做一个网站，有一个讲故事的目的。当用户点击某件东西时，会出现一个新的布局，可以是覆盖整个屏幕的视频，也可以是图片。当下一个按钮被按下时，它必须显示一些新的东西，但url必须保持不变。 我一直在尝试使用vue中的组件，但我不知道如何处理点击以将页面重写为其他内容。 我有一个文件start.vue，里面有一个用于开始屏幕的模板，还有一个firstvideo.vue (例如)，它有自己的模板。如何将这两个事件与单击事件连接起来？ App.vue-file： <template>
<div id="app">
&l
浏览 11提问于2019-12-05得票数 0
回答已采纳
我有一个Vue应用程序，它有条件地显示相同组件的集合，我希望绑定到创建或挂载的方法，但是Vue保持重用以前的组件，不触发方法。我试过用“保持活”的标签包装组件，但没有效果。
下面的代码显示了您在页面上所期望的内容:将someVariable更改为“test1”或“test2”将显示相关组件，但创建/挂载的方法最多只能触发2次(例如，将someVariable更改为“test1”日志创建，并使用标签type1安装1个组件，然后将其更改为“test2”，只记录多一个带有标签type3的组件)。
目前正在使用2.1.10版本
<div id="app">
<
浏览 1提问于2017-01-31得票数 3
回答已采纳
我有一个列表/详细信息用例，其中用户可以双击产品列表中的项目，转到详细信息屏幕进行编辑，然后在完成编辑后返回到列表屏幕。我已经使用这里描述的动态组件技术做到了这一点：。但现在我计划在应用程序中的其他地方使用vue-router，我想重构它以使用路由。使用我的动态组件技术，我使用了keep-alive来确保当用户切换回列表视图时，会出现与编辑前相同的选择。但在我看来，通过路由，产品列表组件将被重新呈现，这不是我想要的。
现在，看起来路由器视图可以被包装在keep-alive中，这将解决一个问题，但会引入许多其他问题，因为我只想让该路由保持活动状态，而不是所有路由(目前我只使用一个顶级路由器视图)
浏览 65提问于2017-01-20得票数 32
在我的项目中，我使用vue.js 2.9。 我有detail.vue页面，一些html代码是这样的： <div class="tab">
<div class="tab-item">
<router-link to='/goods' >goods</router-link>
</div>
<div class="tab-item">
<router-link to='/ratings' >ratings</r
浏览 34提问于2019-02-19得票数 0
回答已采纳
我正在尝试使用Vue.js 2.0构建一个单一页面应用程序。该应用程序应该具有多种操作模式，我希望使用Vue.js 来实现这些模式。由于每种模式的状态都应该在它们之间切换时保持下来，所以我决定使用Vue.js提供的Vue.js特性。其中一种模式应该是使用Cytoscape.js创建的网络视图。
我的问题来了。当我第一次切换到网络时，网络就被正确地初始化了，但是在来回切换之后，网络视图冻结了。“保持活力”正常工作(据我理解)，并带回了Cytoscape实例和适当的HTML部分。不知何故，Cytoscape实例和HTML部分之间的连接似乎丢失了，尽管我不明白如何和为什么。
下面是一个示例代码。
浏览 2提问于2017-04-24得票数 5
回答已采纳
1回答
我找不到如何访问从Vue路由加载的组件实例，并通过<keep-alive>和<component>持久化，这样我就可以以编程方式卸载它。
我正在实现一个动态选项卡系统，以便每个选项卡呈现一个URL，而URL又会显示其声明的组件。每当创建新选项卡或选择其他选项卡时，我都不希望每次加载新路由时卸载组件。我是通过在一个名为keep-alive/component的定制组件中与MultiTabs相结合来实现这一目标的：
<multi-tabs>
<router-view v-slot="{ Component }">
浏览 6提问于2021-11-25得票数 0
回答已采纳
当我在选项卡中单击go to contact时，这是一个警告：“属性或方法"switchTo”未在实例上定义，但在呈现期间被引用。请确保在data选项中声明reactive data属性。(在组件中找到)。“
我该如何解决这个问题？
new Vue({
el: '#app',
data: {
currentPage: 'home',
},
methods: {
switchTo: function(page) {
this.currentPage = page;
}
},
c
浏览 16提问于2017-02-10得票数 0
回答已采纳
重定向到新链接和样式css可以工作，但在新组件上没有任何方法或事件无效。组件导航条保持完美运行，检查器没有显示错误。如果重新加载页面，则所有操作都会再次工作。向我的英语道歉
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './componentes/App.vue'
Vue.use(VueRouter)
const router = new VueRoute
浏览 1提问于2019-03-26得票数 0
1回答
我已经实现了点击外部指令关闭边栏。指令运行良好，但侧栏的内容(任何单击事件都不会触发)。如何停止传播该事件？
这里是我的clickoutside.js
import Vue from 'vue';
const nodeList = [];
const ctx = '@@clickoutsideContext';
let startClick;
const counter = 0;
const isServer = Vue.prototype.$isServer;
/**
* added this on event function for di
浏览 3提问于2021-03-10得票数 1
我的Vue应用程序有一个动态标签机制。
用户可以动态创建尽可能多的选项卡，每个选项卡都有自己的状态(如“页面”)。
我使用<keep-alive>组件来缓存不同的页面。
<keep-alive include="page">
<router-view :key="$route.params.id" />
</keep-alive>
但用户也可以“关闭”个别选项卡。由于页面倾向于存储大量数据，所以在用户关闭选项卡时，我想从缓存中删除相应的页面组件。
如何以编程方式销毁“保持活动”中的缓存组件？
浏览 1提问于2019-05-03得票数 13
回答已采纳
1回答
我使用Vue中的<keep-alive>标记(如中所描述的)来保存跨路由组件的状态，这样当我导航到应用程序的不同部分时，状态就不会被重置。看上去挺好的。
我想知道的是:是否也有办法保护跨网站的国家？当我导航到一个不同的网站(通过点击一个外部链接)，然后点击后退按钮回到应用程序，我希望组件仍然保持其状态。
这是我在Vue中完全可以使用keep-alive或其他方法实现的吗？
浏览 1提问于2020-01-18得票数 2
回答已采纳
我是Vue.js的新手。我遵循这里的教程-- --关于动态组件，给我一个我喜欢的动态布局，用于列出产品，并允许用户在单击表中的某个产品时切换到编辑视图。因此，我有一个“列表-产品”组件和一个“编辑-产品”组件，其中一个是取决于主Vue实例中'currentView‘的状态。
<div id="content">
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
当c
浏览 1提问于2016-11-16得票数 3
回答已采纳
我有一个问题，router-view中保持活动状态的组件在第一次创建时没有调用它的activated生命周期钩子。正在调用created和mounted生命周期挂钩。在第二次访问时，将调用activated挂钩。 这个场景相当复杂，因为涉及到一些嵌套和插槽使用。 我已经尝试创建了一个最小的例子，你可以在下面找到，或者在https://codesandbox.io/s/251k1pq9n上更详细一些。 不幸的是，它相当大，仍然没有真正的代码那么复杂，不幸的是我不能分享。 更糟糕的是，我未能在我的最小示例中重现实际问题。在这里，created、mounted和activated生命周期钩子在第一
浏览 63提问于2019-03-01得票数 2
1回答
从VueJS组件发出的重复事件
、、、、
当鼠标光标进入并离开我的VueJS组件时，将分别调用以下方法。
当游标进入并离开我的组件时调用的方法：
// located in "methods" section of my Vue component file
onMouseEnter() {
window.Event.$emit("mouse-entered", this.index);
console.log("Mouse entered");
},
onMouseLeave() {
window.Event.$emit("mouse-left"
浏览 0提问于2018-07-21得票数 9
1回答
我有一个这样的页面：
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="#" @click="currentView='create'">Create</a>
浏览 1提问于2017-11-01得票数 0
我正在尝试从一个计算值呈现一个组件。但是，当数组长度从以前的长度改变时，<keep-alive>标记就不能工作了。
我预计cOption组件的创建钩子只会触发一次，但它继续记录其“创建的cOption！”每次将flag值切换到false时发出消息。
我使用的是Vue版本^2.5.13 (使用Nuxt版本1.4.0)
这是我的密码：
new Vue({
el: '#app',
data() {
return {
flag: false
}
},
computed: {
options() {
let
浏览 0提问于2018-06-29得票数 2
回答已采纳
1回答
我有一个名为posts的视图/页面，我想用一个帖子列表来显示它。让我们假设这个页面将包含数千个帖子。因此，我只想加载它一次，如果用户导航到应用程序的不同页面，然后返回到posts页面，我不想进行API调用并再次加载所有的帖子。
我看到Vue有一个叫做<keep-alive>的东西，它可以缓存某些路由/组件：
以下是我尝试过的：
<keep-alive :include="posts">
<RouterView :key="$route.name" class="pb-5"/>
</keep-ali
浏览 2提问于2020-03-05得票数 1
回答已采纳
1回答
保持活力在vue.js中不起作用
、、、、
我的vuejs版本是3，我在我的应用程序中实现了这两种方法。
1
<template>
<div id="nav" classs="container is-max-desktop"></div>
<keep-alive>
<router-view />
</keep-alive>
</template>
<style>
@import "~bulma/css/bulma.css";
</style>
2
import { cre
浏览 6提问于2022-05-20得票数 2
2回答
我有父组件(Vue)和子组件。
我有几个元素可以通过更改当前数据在组件之间切换。
问题是我不知道如何标记活动选项卡。
我做了很多事情，在更新的、更新的、安装的、创建的、预测的生活挂钩之间切换。但什么都没起作用。
此代码仅在初始加载(即"Home")时工作，我希望它只对活动的加载进行样式设置，而不使用其他任何样式。但不幸的是没能成功。
在大多数情况下，它要么工作，但样式所有访问的链接，或根本不工作，或在最初的活动选项卡(如这个)工作。
重要代码的父组件的部分：
<template>
<div id="grid">
<nav
浏览 0提问于2018-08-08得票数 1
回答已采纳
1回答
突变Nuxt元件
、、
几周来，我一直在努力学习vuex (我已经看了几十个教程，它们只介绍了反例)。我很慢，还不知道该怎么做。
我的想法是能够在组件之间切换制表符。我知道我应该用一个动作来激活突变(我还没能做到)，但是我认为这个突变应该仍然在按钮上起作用吗？
我的问题是，如何正确设置一个突变，通过单击按钮传递组件值？
另外，我想知道我的组件切换想法是否会奏效，或者是否有更好的方法来做到这一点。
SignUp.vue
<template>
<keep-alive>
<component :is="component" />
</keep-ali
浏览 2提问于2021-07-09得票数 1
回答已采纳
Axios被分配给直接从node_modules导入的Vue.prototype，如下所示： import axios from "axios";
import Vue from "vue"
Vue.prototype.axios = axios; 每次浏览器发送请求时，connection: keep-alive都是可用的。 有没有办法去掉报头？ axios.defaults.headers.common中可用的默认标头为 {
Accept: "application/json, text/plain, */*
}
浏览 148提问于2020-04-08得票数 0
回答已采纳
我的Vue应用程序包含两个主要的路由器视图:一个在一个模式内部，允许在所述模式中加载内容，另一个在主页中。我使用name属性区分它们。例如，下面是routes.js文件中的一段代码，它将内容加载到模式中。
export default ({
mode: 'history',
routes: [
{
path: '/classComp/create',
components: {
modalView: createClass
}
浏览 1提问于2021-02-13得票数 0
回答已采纳
我正在开发一个Vue 2.5SPA使用vue-路由器3.0。
一些视图包含呈现iframes的子组件。
当我切换到另一条路由并返回到呈现一个iframe的路由时，相关的iframe 将被重新加载，即使它以前被访问过。这种行为是不必要的，因为在这种情况下，它会导致错误的UX。当用户返回视图时，iframe状态将保持不变。
我想重装是由离开路线时被摧毁的区域造成的。即使是以下结构也不能阻止它：
<keep-alive>
<router-view></router-view>
</keep-alive>
<keep-alive>似乎使V
浏览 16提问于2017-12-27得票数 2
3回答
我有一个包装在<keep-alive>标记中的Vue组件，以防止重新呈现。
在组件中，我希望通过触发一个方法来对全局数据中的某些更改做出反应。但是，我只想在组件当前处于活动状态时触发该方法。
现在，我正在做这样的事情：
export default {
data() {
return {
globalVar: this.$store.state.var,
isComponentActive: false,
};
},
methods: {
foo() { console.log('foo') };
}
浏览 0提问于2018-05-11得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
