Vue - 编程式路由导航
2021/10/16 22:10:20
本文主要是介绍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 - 编程式路由导航的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践