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 代表后退三次

这篇关于Vue - 编程式路由导航的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！