我正在使用vue路由器通过转换和vuex进行路由，以检索和存储所有有效的JSON API的内容。
唯一的问题发生在使用相同组件的路由上。一秒钟后，组件的旧状态在路由更改后可见，并在2秒钟后使用新内容对其进行更新。我猜是因为它正在等待axios并在状态可用并可以映射时立即对其进行更新。我试图添加一个v-if并加载动画，但是由于旧状态仍然被映射，所以它不起作用。解决这个问题的途径是什么？
我想知道这是否与另一个问题有关-尽管我使用id <router-view :key="$route.params.id" />任何帮助，但过渡都不会在具有相同组件的路由上起作用！
路由器
<transition name="fade" mode="out-in" appear>
<router-view :key="$route.params.id" />
</transition>
组件
export default {
name: 'SinglePage',
data() {
return {
page_slug: this.$route.params.page
}
},
computed:{
...mapState({
homepage_slug: state => state.settings.homepage,
title: state => state.page.title,
content: state => state.page.content,
f_image: state => state.page.image
})
},
watch: {
'$route': function () {
this.page_slug = this.$route.params.page
this.loadContent()
}
},
methods: {
loadContent: function(){
if(this.$route.name == 'homepage'){
this.$store.dispatch('LOAD_PAGE', { slug: this.homepage_slug })
}
else{
const page_slug = this.$route.params.page
this.$store.dispatch('LOAD_PAGE', { slug: page_slug })
}
}
},
mounted() {
this.loadContent()
}
}
Vuex / Axios
import axios from 'axios'
export default {
state: {
title: '',
content: '',
image: ''
},
actions: {
LOAD_PAGE: function({ commit }, slug) {
axios
.get('http://myjsonapi/pages?slug=' + slug.slug )
.then(response => response.data)
.then(page => {
commit('SET_PAGE', page)
})
}
},
mutations: {
SET_PAGE(state, page) {
state.title = page[0].title.rendered,
state.content = page[0].content.rendered,
state.image = page[0].featured_img_url
}
},
getters: {
}
}
答案 0 :(得分：0)
尝试在您的应用中使用v-cloak：
=========================================================================
...
08:59:31,861 INFO [org.jboss.as.server.deployment.scanner] (MSC service thread 1-5) WFLYDS0013: Started FileSystemDeploymentService for directory /home/caio/wildfly-17.0.0.Final/standalone/deployments
08:59:32,326 INFO [org.wildfly.extension.undertow] (MSC service thread 1-7) WFLYUT0006: Undertow HTTPS listener https listening on 127.0.0.1:8443
08:59:32,663 INFO [org.jboss.ws.common.management] (MSC service thread 1-6) JBWS022052: Starting JBossWS 5.3.0.Final (Apache CXF 3.3.2)
08:59:32,952 INFO [org.jboss.as.server] (Controller Boot Thread) WFLYSRV0212: Resuming server
08:59:32,966 INFO [org.jboss.as] (Controller Boot Thread) WFLYSRV0060: Http management interface listening on http://127.0.0.1:9990/management
08:59:32,967 INFO [org.jboss.as] (Controller Boot Thread) WFLYSRV0051: Admin console listening on http://127.0.0.1:9990
08:59:32,967 INFO [org.jboss.as] (Controller Boot Thread) WFLYSRV0025: WildFly Full 17.0.0.Final (WildFly Core 9.0.1.Final) started in 12258ms - Started 314 of 576 services (369 services are lazy, passive or on-demand)
Connected to server
[2019-07-08 08:59:33,534] Artifact sistema:war exploded: Artifact is being deployed, please wait...
08:59:33,806 INFO [org.jboss.as.server.deployment] (MSC service thread 1-6) WFLYSRV0027: Starting deployment of "sistema_war_exploded" (runtime-name: "sistema_war_exploded.war")
08:59:38,663 INFO [org.jboss.as.jpa] (MSC service thread 1-6) WFLYJPA0002: Read persistence.xml for SistemaPU
08:59:39,509 INFO [org.jboss.weld.deployer] (MSC service thread 1-8) WFLYWELD0003: Processing weld deployment sistema_war_exploded.war
08:59:39,759 INFO [org.infinispan.factories.GlobalComponentRegistry] (MSC service thread 1-5) ISPN000128: Infinispan version: Infinispan 'Infinity Minus ONE +2' 9.4.14.Final
08:59:39,812 INFO [org.hibernate.validator.internal.util.Version] (MSC service thread 1-8) HV000001: Hibernate Validator 6.0.16.Final
08:59:40,074 INFO [org.jboss.as.jpa] (ServerService Thread Pool -- 76) WFLYJPA0010: Starting Persistence Unit (phase 1 of 2) Service 'sistema_war_exploded#SistemaPU'
08:59:40,103 INFO [org.hibernate.jpa.internal.util.LogHelper] (ServerService Thread Pool -- 76) HHH000204: Processing PersistenceUnitInfo [
name: SistemaPU
...]
08:59:40,343 INFO [org.hibernate.Version] (ServerService Thread Pool -- 76) HHH000412: Hibernate Core {5.3.10.Final}
08:59:40,351 INFO [org.hibernate.cfg.Environment] (ServerService Thread Pool -- 76) HHH000206: hibernate.properties not found
08:59:40,937 INFO [org.hibernate.annotations.common.Version] (ServerService Thread Pool -- 76) HCANN000001: Hibernate Commons Annotations {5.0.5.Final}
08:59:41,191 INFO [org.jboss.as.clustering.infinispan] (ServerService Thread Pool -- 10) WFLYCLINF0002: Started client-mappings cache from ejb container
08:59:41,523 INFO [org.jboss.as.connector.deployers.jdbc] (MSC service thread 1-7) WFLYJCA0005: Deploying non-JDBC-compliant driver class org.postgresql.Driver (version 42.2)
08:59:41,568 INFO [org.jboss.weld.Version] (MSC service thread 1-7) WELD-000900: 3.1.1 (Final)
08:59:41,707 INFO [org.jboss.as.connector.deployers.jdbc] (MSC service thread 1-6) WFLYJCA0018: Started Driver service with driver-name = sistema_war_exploded.war_org.postgresql.Driver_42_2
08:59:42,098 INFO [org.jboss.as.jpa] (ServerService Thread Pool -- 76) WFLYJPA0010: Starting Persistence Unit (phase 2 of 2) Service 'sistema_war_exploded#SistemaPU'
08:59:42,141 WARN [org.hibernate.orm.connections.pooling] (ServerService Thread Pool -- 76) HHH10001002: Using Hibernate built-in connection pool (not for production use!)
08:59:42,144 INFO [org.hibernate.orm.connections.pooling] (ServerService Thread Pool -- 76) HHH10001005: using driver [org.postgresql.Driver] at URL [jdbc:postgresql://localhost/postgres]
08:59:42,145 INFO [org.hibernate.orm.connections.pooling] (ServerService Thread Pool -- 76) HHH10001001: Connection properties: {user=postgres, password=****}
08:59:42,146 INFO [org.hibernate.orm.connections.pooling] (ServerService Thread Pool -- 76) HHH10001003: Autocommit mode: false
08:59:42,151 INFO [org.hibernate.engine.jdbc.connections.internal.DriverManagerConnectionProviderImpl] (ServerService Thread Pool -- 76) HHH000115: Hibernate connection pool size: 20 (min=1)
08:59:42,562 INFO [org.hibernate.dialect.Dialect] (ServerService Thread Pool -- 76) HHH000400: Using dialect: org.hibernate.dialect.PostgreSQL9Dialect
08:59:42,850 INFO [org.hibernate.engine.jdbc.env.internal.LobCreatorBuilderImpl] (ServerService Thread Pool -- 76) HHH000424: Disabling contextual LOB creation as createClob() method threw error : java.lang.reflect.InvocationTargetException
08:59:42,862 INFO [org.hibernate.type.BasicTypeRegistry] (ServerService Thread Pool -- 76) HHH000270: Type registration [java.util.UUID] overrides previous : org.hibernate.type.UUIDBinaryType@1c2ad0f0
08:59:42,874 INFO [org.hibernate.envers.boot.internal.EnversServiceImpl] (ServerService Thread Pool -- 76) Envers integration enabled? : true
08:59:44,465 WARN [org.jboss.weld.Bootstrap] (MSC service thread 1-3) WELD-000146: BeforeBeanDiscovery.addAnnotatedType(AnnotatedType<?>) used for class com.sun.faces.flow.FlowDiscoveryCDIHelper is deprecated from CDI 1.1!
08:59:44,476 INFO [io.smallrye.metrics] (MSC service thread 1-3) MicroProfile: Metrics activated
08:59:47,293 INFO [org.jboss.weld.environment.servletWeldServlet] (ServerService Thread Pool -- 76) WELD-ENV-001008: Initialize Weld using ServletContainerInitializer
08:59:47,328 INFO [org.jboss.weld.Bootstrap] (ServerService Thread Pool -- 76) WELD-ENV-000020: Using jandex for bean discovery
08:59:47,350 WARN [org.jboss.weld.environment.deployment.discovery.DefaultBeanArchiveScanner] (ServerService Thread Pool -- 76) Unable to adapt URL: vfs:/home/caio/IdeaProjects/sistema/out/artifacts/sistema_war_exploded/WEB-INF/classes/META-INF/beans.xml, using its external form instead
08:59:47,365 ERROR [org.jboss.msc.service.fail] (ServerService Thread Pool -- 76) MSC000001: Failed to start service jboss.deployment.unit."sistema_war_exploded.war".undertow-deployment: org.jboss.msc.service.StartException in service jboss.deployment.unit."sistema_war_exploded.war".undertow-deployment: java.lang.RuntimeException: java.lang.NullPointerException
at org.wildfly.extension.undertow.deployment.UndertowDeploymentService$1.run(UndertowDeploymentService.java:81)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at org.jboss.threads.ContextClassLoaderSavingRunnable.run(ContextClassLoaderSavingRunnable.java:35)
at org.jboss.threads.EnhancedQueueExecutor.safeRun(EnhancedQueueExecutor.java:1982)
at org.jboss.threads.EnhancedQueueExecutor$ThreadBody.doRunTask(EnhancedQueueExecutor.java:1486)
at org.jboss.threads.EnhancedQueueExecutor$ThreadBody.run(EnhancedQueueExecutor.java:1377)
at java.lang.Thread.run(Thread.java:748)
at org.jboss.threads.JBossThread.run(JBossThread.java:485)
Caused by: java.lang.RuntimeException: java.lang.NullPointerException
at io.undertow.servlet.core.DeploymentManagerImpl.deploy(DeploymentManagerImpl.java:252)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentService.startContext(UndertowDeploymentService.java:96)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentService$1.run(UndertowDeploymentService.java:78)
... 8 more
Caused by: java.lang.NullPointerException
at org.jboss.weld.environment.deployment.discovery.jandex.JandexFileSystemBeanArchiveHandler.handle(JandexFileSystemBeanArchiveHandler.java:43)
at org.jboss.weld.environment.deployment.discovery.AbstractDiscoveryStrategy.performDiscovery(AbstractDiscoveryStrategy.java:87)
at org.jboss.weld.environment.servlet.WeldServletLifecycle.createDeployment(WeldServletLifecycle.java:230)
at org.jboss.weld.environment.servlet.WeldServletLifecycle.initialize(WeldServletLifecycle.java:120)
at org.jboss.weld.environment.servlet.EnhancedListener.onStartup(EnhancedListener.java:61)
at io.undertow.servlet.core.DeploymentManagerImpl$1.call(DeploymentManagerImpl.java:203)
at io.undertow.servlet.core.DeploymentManagerImpl$1.call(DeploymentManagerImpl.java:185)
at io.undertow.servlet.core.ServletRequestContextThreadSetupAction$1.call(ServletRequestContextThreadSetupAction.java:42)
at io.undertow.servlet.core.ContextClassLoaderSetupAction$1.call(ContextClassLoaderSetupAction.java:43)
at org.wildfly.extension.undertow.security.SecurityContextThreadSetupAction.lambda$create$0(SecurityContextThreadSetupAction.java:105)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentInfoService$UndertowThreadSetupAction.lambda$create$0(UndertowDeploymentInfoService.java:1502)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentInfoService$UndertowThreadSetupAction.lambda$create$0(UndertowDeploymentInfoService.java:1502)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentInfoService$UndertowThreadSetupAction.lambda$create$0(UndertowDeploymentInfoService.java:1502)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentInfoService$UndertowThreadSetupAction.lambda$create$0(UndertowDeploymentInfoService.java:1502)
at org.wildfly.extension.undertow.deployment.UndertowDeploymentInfoService$UndertowThreadSetupAction.lambda$create$0(UndertowDeploymentInfoService.java:1502)
at io.undertow.servlet.core.DeploymentManagerImpl.deploy(DeploymentManagerImpl.java:250)
... 10 more
08:59:47,376 ERROR [org.jboss.as.controller.management-operation] (management-handler-thread - 1) WFLYCTL0013: Operation ("deploy") failed - address: ([("deployment" => "sistema_war_exploded")]) - failure description: {"WFLYCTL0080: Failed services" => {"jboss.deployment.unit.\"sistema_war_exploded.war\".undertow-deployment" => "java.lang.RuntimeException: java.lang.NullPointerException
Caused by: java.lang.RuntimeException: java.lang.NullPointerException
Caused by: java.lang.NullPointerException"}}
08:59:47,382 ERROR [org.jboss.as.server] (management-handler-thread - 1) WFLYSRV0021: Deploy of deployment "sistema_war_exploded.war" was rolled back with the following failure message:
{"WFLYCTL0080: Failed services" => {"jboss.deployment.unit.\"sistema_war_exploded.war\".undertow-deployment" => "java.lang.RuntimeException: java.lang.NullPointerException
Caused by: java.lang.RuntimeException: java.lang.NullPointerException
Caused by: java.lang.NullPointerException"}}
08:59:47,390 INFO [org.jboss.as.connector.deployers.jdbc] (MSC service thread 1-4) WFLYJCA0019: Stopped Driver service with driver-name = sistema_war_exploded.war_org.postgresql.Driver_42_2
08:59:47,470 INFO [org.jboss.as.jpa] (ServerService Thread Pool -- 15) WFLYJPA0011: Stopping Persistence Unit (phase 2 of 2) Service 'sistema_war_exploded#SistemaPU'
08:59:47,474 INFO [org.hibernate.orm.beans] (ServerService Thread Pool -- 15) HHH10005004: Stopping BeanContainer : org.hibernate.resource.beans.container.internal.CdiBeanContainerExtendedAccessImpl@1593c593
08:59:47,476 INFO [org.hibernate.orm.connections.pooling] (ServerService Thread Pool -- 15) HHH10001008: Cleaning up connection pool [jdbc:postgresql://localhost/postgres]
08:59:47,496 INFO [org.jboss.as.jpa] (ServerService Thread Pool -- 15) WFLYJPA0011: Stopping Persistence Unit (phase 1 of 2) Service 'sistema_war_exploded#SistemaPU'
08:59:47,607 INFO [org.jboss.as.server.deployment] (MSC service thread 1-6) WFLYSRV0028: Stopped deployment sistema_war_exploded (runtime-name: sistema_war_exploded.war) in 228ms
[2019-07-08 08:59:47,699] Artifact sistema:war exploded: Error during artifact deployment. See server log for details.
[2019-07-08 08:59:47,699] Artifact sistema:war exploded: java.lang.Exception: {"WFLYCTL0080: Failed services" => {"jboss.deployment.unit.\"sistema_war_exploded.war\".undertow-deployment" => "java.lang.RuntimeException: java.lang.NullPointerException
Caused by: java.lang.RuntimeException: java.lang.NullPointerException
Caused by: java.lang.NullPointerException"}}
css：
<router-view :key="$route.params.id" v-cloak/>