在開發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

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