Vue(Vue2+Vue3)——71.编程式路由导航

简介: Vue(Vue2+Vue3)——71.编程式路由导航

71 编程式路由导航


router-link本质就是转换为a标签进行跳转,但是有的场景我们需要使用按钮或者定时器进行跳转,这时候就不能借助router-link标签了

简单来说其实就是不借助router-link标签的路由导航,我们通过代码也可以自己实现,在$router里面有三个api:back(后退),forward(前进),go(根据参数进行不同的动作)


back(后退)


让路由执行一个后退的动作


forward(前进)


让路由执行一个前进的动作


go(可前进也可后退)


根据参数进行不同的动作,如果是整数就前进几步,如果是负数就后退几步


总结


  1. 作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活
  2. 具体编码:
//$router的两个API
this.$router.push({
        name:'xiangqing',
                params:{
                        id:xxx,
                        title:xxx
                }
})
this.$router.replace({
        name:'xiangqing',
                params:{
                        id:xxx,
                        title:xxx
                }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退
相关文章
|
22天前
|
JavaScript API
vue 批量自动引入并注册组件或路由
vue 批量自动引入并注册组件或路由
|
6天前
|
JavaScript 索引
Vue 2和Vue 3的区别以及实现原理
Vue 2 的响应式系统通过Object.defineProperty来实现,它为对象的每个属性添加 getter 和 setter,以便追踪依赖并响应数据变化。
22 9
|
17天前
|
JavaScript 前端开发 编译器
对Vue2 与 Vue3 的区别的理解
【9月更文挑战第3天】对Vue2 与 Vue3 的区别的理解
18 0
|
21天前
|
JavaScript 前端开发 UED
揭秘Vue.js高效开发:Vue Router如何让单页面应用路由管理变得如此简单?
【8月更文挑战第30天】随着Web应用复杂性的增加,单页面应用(SPA)因出色的用户体验和高效的页面加载性能而备受青睐。Vue.js凭借简洁的语法和灵活的组件系统成为构建SPA的热门选择,其官方路由管理器Vue Router则简化了路由管理。本文通过实战示例介绍如何利用Vue Router实现高效的SPA路由管理,包括命名路由、动态路由及其核心优势。
11 0
|
21天前
|
JavaScript API 网络架构
vue 动态路由使用
【8月更文挑战第30天】vue 动态路由使用
31 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
8 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1天前
|
JavaScript
vue知识点
vue知识点
6 2