技術標籤：vuevue

通過程式碼跳轉路由

<template>
  <div id="app">
    <div id="nav">
      <!--  <router-link to="/"  >Home</router-link> |
        <router-link to="/about" >About</router-link>-->
      <button @click="homeClick"
 
>首頁</button>
      <button @click="aboutClick">關於</button>
    </div>
     <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App',
    methods: {
      homeClick() {
         //修改路徑
        //push => pushState
        //this.$router.push('')
 

        //replace方法
        this.$router.replace('/')
      },
      aboutClick() {
        //this.$router.push('/about')
        this.$router.replace('/about')
      }
    }
  }
</script>

之前我們可以使用router-link來實現路由跳轉，tag標籤實現我們自定義標籤。

但是其實我們直接可以自定義標籤，監聽點選，自定義方法實現路由跳轉。

通過$router可呼叫push方法將路由壓入棧中，有記錄。

replace方法不會產生回退和前進箭頭