Vue 程式設計式路由導航的實現範例

2022-04-18 10:00:35

router- link的replace屬性

1.作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
2.瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace，push是追加歷史記錄，replace是替換當前記錄。路由跳轉時候預設為push
3.如何開啟replace模式News

程式設計式路由導航

作用：不借助<router-link> 實現路由跳轉，讓路由跳轉更加靈活
具體編碼：

/ /$router的兩個API
this.$router.push({
	name : 'xiangqing',
	params :{
		id :xxx,
		title :xXX
	}
})
this.$router.replace({
	name : "xiangqing',
	params :{
		id : xxX,
		title :xXX
	}
})
this.$router.forward()//前進
this.$router.back()//後退
this.$router.go()//可前進也可後退

修改 Banner

<template>
  <div class="col-xs-offset-2 col-xs-8">
    <div class="page-header">
      <h2>Vue Router Demo</h2>
      <button @click="back">後退</button>
      <button @click="forward">前進</button>
      <button @click="test">測試一下 go</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  methods:{
    back(){
      this.$router.back()
    },
    forward(){
      this.$router.forward()
    },
    test(){
      this.$router.go(-3)
    }
  }
}
</script>

修改 Message

                <!--跳轉路由並攜帶params引數，to的物件寫法-->
        ......
        <button @click="pushShow(m)">push檢視</button>
        <button @click="replaceShow(m)">replace檢視</button>

<script>
export default {
  ......
  methods: {
    pushShow(m) {
      this.$router.push({
        name: 'xiangqing',
        query: {
          id: m.id,
          title: m.title
        }
      })
    },
    replaceShow(m) {
      this.$router.replace({
        name: 'xiangqing',
        query: {
          id: m.id,
          title: m.title
        }
      })
    }
  }
}
</script>

快取路由元件

作用：讓不展示的路由元件保持掛載，不被銷燬
具體編碼：

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

修改 News 元件，每個訊息後展示輸入框

<template>
  <ul>
    <li>news001 <input/></li>
    <li>news002 <input/></li>
    <li>news003 <input/></li>
  </ul>
</template>

當我們在後邊輸入框中輸入文字，切換到別的連結，再切回來，會發現 input 內的文字就清空了，因為我們之前說過，當 News 切換走的時候，它已經被銷燬了，我們可以在 beforeDestroy 中列印測試，這裡不做演示

想要快取這個頁面，可以在 News 的最終展示區 Home 中增加標籤router-view，然後使用 include 標識要快取的元件名

<keep-alive include="News"><router-view></router-view></keep-alive>

再看效果

注意：
1、include後是元件名稱
2、不寫會快取所有的
3、如果想快取多個，可以寫成陣列

:include="['News','Message']"

兩個新的生命勾點

作用：路由元件所獨有的兩個勾點，用於捕獲路由元件的啟用狀態
activated路由元件被啟用時觸發
deactivated路由元件失活時觸發

現在的需求是，我們希望在 News 元件周而復始的展示一個文字，之前我們寫過就是使用 setInterval，然後在 beforeDestroy 中再銷燬這個 setInterval，但是由於我們上一節中，已經把 News 設定了快取，不會走 beforeDestroy 了，所以我們引入兩個新的生命週期勾點

修改 News

<template>
  <ul>
    <li :style="{opacity}">歡迎學習Vue</li>
    <li>news001 <input/></li>
    <li>news002 <input/></li>
    <li>news003 <input/></li>
  </ul>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      opacity: 1
    }
  },
  activated() {
    this.timer = setInterval(() => {
      this.opacity -= 0.01
      if (this.opacity <= 0) this.opacity = 1
    },16)
  },
  deactivated() {
    clearInterval(this.timer);
  }
}
</script>

到此這篇關於Vue 程式設計式路由導航的實現範例的文章就介紹到這了,更多相關Vue 程式設計式路由導航內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue 程式設計式路由導航的實現範例

目錄

router- link的replace屬性

程式設計式路由導航

快取路由元件

兩個新的生命勾點

熱門文章