在开发vue项目过程中，因为项目原因需要实现局部刷新操作就比如最常见的管理系统左边是菜单，右边一大块是路由区域因为如果使用window.location.x的方式的话会导致整个网页刷新造成数据跟状态的丢失、这并不是我们想要的因为毕竟这是个单页应用只是需要局部刷新而已既刷新路由区域，我来为大家讲解一下关于vue如何在页面加载的时候刷新页面?跟着小编一起来看一看吧!
vue如何在页面加载的时候刷新页面
在开发vue项目过程中，因为项目原因需要实现局部刷新操作。就比如最常见的管理系统。左边是菜单，右边一大块是路由区域。因为如果使用window.location.x的方式的话会导致整个网页刷新。造成数据跟状态的丢失、这并不是我们想要的。因为毕竟这是个单页应用。只是需要局部刷新而已。既刷新路由区域。
思路因为vue路由切换的时候数据都会重新刷新。所以我们就利用这个
- 新建一个公共组件。用于实现重定向跳转，进而实现刷新操作。组件名称redirect.vue
// redirect.vue 组件就这么简单，就只有这么点内容。目的只是用于重定向
<script>
export default {
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' path, query })
},
}
</script>
// router.js
const routes = [
// 重定向，用于实现刷新操作
{
path: '/redirect/:path(.*)',
component: () => import('../views/redirect.vue'),
},
{
path: '/',
name: 'login',
meta: {title: '登录页' },
component: () => import('../views/login.vue')
}]
以后我们需要刷新则只需要导航到/redirect下
- 需要刷新当前页面用法如下：
// 刷新当前页面 refreshSelectedTag() { this.$nextTick(() => { this.$router.replace({ path: '/redirect' this.selectedTag.path, }) }) },注意：this.selectedTag.path是你需要刷新的路由
第二种实现思路，在router-view使用v-if,
- 在根组件中
- 在组件中使用
