Vue - 程式設計式路由導航
阿新 • • 發佈:2021-10-16
作用:不借助<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 代表後退三次