我有一个问题,看起来很简单,但现在不那么简单(对我来说):
我已经使用 vue-cli (路由器、VueX、PWA)建立了一个 Vue 项目。我一如既往地设置了一些路线(直接遵循文档的建议)和 VueX 中的一些状态字段:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Logout from '@/components/functional/Logout.vue'
import Datapoints from '@/views/Datapoints.vue'
import store from '../store'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'login',
component: Login,
meta: {
requiresGuest: true
}
},
{
path: '/logout',
name: 'logout',
component: Logout
},
{
path: '/project/:id',
name: 'project',
component: Datapoints
}
]
const router = new VueRouter({
mode: 'history',
routes
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.isAuthenticated) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresGuest)) {
if (store.getters.isAuthenticated) {
next({
path: '/',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
export default router
在我的 View /组件中,我在 $router
实例上使用 push
方法,以编程方式进行死记硬背,如下所示:
this.$router.push({ name: 'home', params: { status: project.response.status, message: project.response.data.error }})
,其中 project
是 awaited
axios HTTP 请求的结果。
我的问题
每次我以编程方式推送新路由,或使用 router-view
元素时,我的页面都会重新加载(我想在 SPA/PWA 中阻止......)
我的 Vue 实例:
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app');
如果有人可以帮助我不用在使用 Vue 路由器每次更改路由时重新加载页面,我会很高兴。
最佳答案
我认为重新加载行为与路由器的历史模式有关
const router = new VueRouter({
mode: 'history',
routes
})
您可以尝试删除历史模式,看看会发生什么。如果您想保留它,请检查历史模式文档以查看所有设置是否已正确完成。 https://router.vuejs.org/guide/essentials/history-mode.html 。
希望这有帮助。
关于javascript - Vue Router 总是重新加载浏览器 - 丢失 vuex-state,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58852108/