1. 程式人生 > >vue 路由引數變化,頁面不重新整理,provide /inject 完美解決方案

vue 路由引數變化,頁面不重新整理,provide /inject 完美解決方案

此方法使用的是v-if來控制router-view的顯示或隱藏,v-if從false變為true時,vue會重新渲染router-view區域,所以當引數變化時,只需讓v-if 從true => false => false,就能實現頁面重新整理;
問題描述

路由
http://localhost:1221/newproduct?entityId=7B311104
點選div時,變為
http://localhost:1221/newproduct
頁面不重新整理
怎麼辦……

溫馨提示,此方法適用vue 2.20+版本,請先檢視你的vue版本

首先,找到自己的route-view

//mainfirem.vue

<template>
  <div class="os_container">
    <navbar></navbar>
    <router-view v-if="isRouterAlive"></router-view>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name:'mainframe',
  provide(){
    return
{ reload:this.reload } }, data () { return { isRouterAlive:true, } }, components:{ navbar, }, methods:{ reload(){ this.isRouterAlive = false //在修改資料之後使用 $nextTick,則可以在回撥中獲取更新後的 DOM this.$nextTick(()=>{ this.isRouterAlive = true }) } } }
</script> <style scoped lang="stylus"></style>
<route-view>下顯示的頁面

//newProduct

export default {
  name: 'newproduct',
  inject:['reload'],
  method:{
    //點選div的時候,路由引數改變,
    //呼叫mainfirem.vue下的this.reload()方法,來改變v-if的狀態
    clickDiv(){
      this.reload()
    }
  }

provide /inject 官網地址
這對選項需要一起使用,以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。
end