1. 程式人生 > 其它 >Vue - 程式設計式路由導航

Vue - 程式設計式路由導航

作用:不借助<router-link> 實現路由跳轉,讓路由跳轉更加靈活
使用:

<template>

  <div>
    <ul>
      <li v-for="(person,index) in person" :key="index">
       <button @click="send(person)">成員{{index}}</button>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Person",
  data(){
    return{
      person:[
        {name:'張三',age:18},
        {name:'李四',age:19},
        {name:'王五',age:20},
      ]
    }
  },
  methods:{
    send(person){
      this.$router.push({  
        name:'Info',
        query:{
          name:person.name,
          age:person.age
        }
      })
    }
  }
}
</script>




其他方法
this.$router.replace({
	name:'Info',
	params:{
	  name:xxx,
	  age:xxx
	}
})   //push是追加歷史記錄,replace是替換當前記錄
this.$router.forward() //前進
this.$router.back() //後退
this.$router.go(m) //可前進也可後退,m = 2 代表前進兩次  m = -3 代表後退三次