聲明式導航&編程式導航

1.在瀏覽器中，點擊鏈接實現導航的方式，叫做聲明式導航，例如：

普通網頁中點擊<a>鏈接、vue項目中點擊<router-link>都屬於聲明式導航

2.在瀏覽器中，調用API方法實現導航的方式，叫做編程式導航,例如:

普通網頁中調用location.href跳轉到新頁面的方式，屬於編程式導航

vue-router中的編程式導航API

1.this.$router.push('hash地址')

跳轉到指定hash地址，並增加一條歷史記錄(可后退)

<button @click="gotoLK">跳轉到電影1頁面</button>
  methods: { 
    gotoLK(){
      // 通過編程式導航API，導航跳轉到指定的頁面(可后退)
      this.$router.push('/movie/1')
    },
   },

 

2.this.$router.replace('hash地址')

跳轉到指定的hash地址，並替換掉當前的歷史紀錄

<button @click="gotoLK2">跳轉到電影2頁面</button>
 methods: { 
    gotoLK2(){
       // 通過編程式導航API，導航跳轉到指定的頁面(不可后退)
        this.$router.replace('/movie/2')
    }
   },

3.this.$router.go(數值n)

可在瀏覽器歷史中前進和后退

  <button @click="goBack1">后退</button>
   <button @click="goBack2">前進</button>
    methods:{
    goBack1(){
      // go(-1)后退一層
      this.$router.go(-1)
      // go(-100)如果后退層數超過上限，則原地不動
    this.$router.go(-100)
    },
    goBack2(){
       this.$router.go(1)
    }
  }

$router.go的簡化方法

在實際開發中，一般只會前進和后退一層頁面，因此vue-router提供了如下兩個便捷方法:

1.$router.back()

//在歷史記錄中，后退到上一個頁面

  <button @click="$router.back()">后退</button>

2.$router.forward()

//在歷史記錄中，后退到下一個頁面

  <button @click="$router.forward()">前進</button>