vue如何在頁面加載的時候刷新頁面?在開發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

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部