在開發(fā)vue項目過程中，因為項目原因需要實現(xiàn)局部刷新操作。就比如最常見的管理系統(tǒng)。左邊是菜單，右邊一大塊是路由區(qū)域。因為如果使用window.location.x的方式的話會導(dǎo)致整個網(wǎng)頁刷新。造成數(shù)據(jù)跟狀態(tài)的丟失、這并不是我們想要的。因為畢竟這是個單頁應(yīng)用。只是需要局部刷新而已。既刷新路由區(qū)域。

思路

因為vue路由切換的時候數(shù)據(jù)都會重新刷新。所以我們就利用這個

• 新建一個公共組件。用于實現(xiàn)重定向跳轉(zhuǎn)，進(jìn)而實現(xiàn)刷新操作。組件名稱redirect.vue

// redirect.vue 組件就這么簡單，就只有這么點內(nèi)容。目的只是用于重定向
<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
}
</script>

// router.js
const routes = [
  // 重定向，用于實現(xiàn)刷新操作
  {
    path: '/redirect/:path(.*)',
    component: () => import('../views/redirect.vue'),
  },
  {
    path: '/',
    name: 'login',
    meta: {title: '登錄頁' },
    component: () => import('../views/login.vue')
  }]

以后我們需要刷新則只需要導(dǎo)航到/redirect下

• 需要刷新當(dāng)前頁面用法如下：

// 刷新當(dāng)前頁面
    refreshSelectedTag() {
      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + this.selectedTag.path,
        })
      })
    },

注意：this.selectedTag.path是你需要刷新的路由

第二種實現(xiàn)思路，在router-view使用v-if

• 在根組件中
•  
• 在組件中使用