程式設計式路由

除了使用

<router-link>

來建立 a 标簽來定義導航連結，我們還可以借助 router 的執行個體方法，通過編寫代碼來實作。

router.push(location, onComplete?, onAbort?)

注意，在 vue 執行個體内部，你可以通過

$router

通路路由執行個體。是以你可以調用

this.$router.push

。

想要導航到不同的 URL，則使用

router.push

方法。這個方法會向 history 棧中添加一個新的記錄，是以，當使用者點選浏覽器後退按鈕時，則回到之前的 URL。

當你點選

<router-link>

時，這個方法會在内部調用，是以說，點選

<router-link ：to="...">

等同于調用

router.push(...)

。

聲明式	程式設計式	Vue執行個體中
<router-link :to="...">	router.push(...)	this.$router.push(...)

該方法的參數可以是一個字元串位址，或者一個描述位址的對象。比如：

<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      // 字元串
      this.$router.push('/');
      // 或者-使用對象 this.$router.push({path: '/'})
      // 或者-命名的路由 this.$router.push({name: '/', params: { userId: '123' }})
      // 或者-帶查參數，程式設計 ?plan=private this.$router.push({path: '/', query: { plan: 'private' }})
    }
  },
}
</script>
           

如果提供了

path

，

params

會被忽略，上述例子中的

query

并不屬于這種情況。取而代之的是下面的做法，你需要提供路由的

name

或手寫完整的帶有參數的

path

。

<script>
export default {
  name: 'App',
  methods: {
    goHome() {
      // /user/123
      this.$router.push({ name: '/', params: {userId} });
      // /user/123
      this.$router.push({ path: `/user/${userId}`});
    }
  }
}
</script>
           

name

用來從路由配置檔案中選擇與屬性值相同的路由。即需要在路由配置檔案配置相同的

name

屬性的路由。

router.go(n)

這個方法的參數是一個整數，意思是在 history 記錄中向前或者向後回退多少步，類似

window.history.go(n)

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <button @click="goBack()" >後退</button>
      <button @click="goAhead()">前進</button>
      <p>
        <button @click="goHome()">傳回首頁</button>
      </p>
    </div>
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goAhead() {
      this.$router.go(1);
    },
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.right {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #ccc;
}

.left {
  float: left;
  width: 50%;
  height: 300px;
  background-color: #c0c;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity .7s;
}

.fade-enter-to {

}

.fade-leave {
  opacity: 1;
}

.fade-leave-active {
  opacity: 0;
  transition: opacity 1s;
}
</style>

           

router.replace(loaction, onComplete?, onAbort?)

跟

router.push

很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉目前的 history 記錄。

聲明式	程式設計式	Vue執行個體中
<router-link :to="..." replace="...">	router.replace(...)	this.$router.replace(...)