在Vue Router中,除了使用 创建 a 标签来定义导航链接之外,还可以使用Vue Router通过编写代码来实现导航.
他提供的三个实例方法:router.push、router.replace和router.go,使用起来相较于声明式导航更加灵活
这些方法都在VueRouter的原型对象上.这些方式都可以通过this.$router来访问到

router.push

  • <rotuer-link to=" "></router-link>内部默认调用的是该方法。
  • 该方法可以传入三个参数:
    • location跳转路由信息 参数与<rotuer-link to=" "></router-link>中的to一致
    • resolve成功回调
    • reject失败回调
    this.$router.push(location,($router)=>{...},(err)=>{...})
    // 对象携带参数的方式调用
    this.$router.push({
    //path:"/search" path与params不可以同时使用
    name:'search',
    params:{...},
    query:{...}
    },
    $router=>{},
    err=>{...}
    )

    它会向 history 栈添加一个新的记录,当进行后退操作时会回到之前访问的路径。

    例如我们访问了:8080:/home/ -> :8080/home/search/ -> :8080/home/search?kw=abc -> :8080/abc/
    他就会把先访问的放在最下面,后访问的放在最上面,后退的时候就会后入先出,从上而下取出

router.replace

该方法与router.push唯一不同的地方就是通过该方法访问的路由会替换掉最新一个历史记录。

router.go

使用该方法可以操作浏览器在历史记录中的前进与后退,

  • 当提供了一个大于0的正整数时,浏览器的路径会在history栈中向上移动对应的步数,
  • 当提供了一个小于0的负整数时,浏览器的路径会在history栈中向下移动对应的步数
  • 当提供了一个为0的参数时,浏览器会刷新页面
    下面是router.go的使用实例
    this.$router.go(1)  // 前进一个页面
    this.$router.go(0) // 刷新页面
    this.$router.go(-1) // 后退一个页面

【Vue2】编程式路由导航的更多相关文章

  1. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  2. vue.js编程式路由导航 --- 由浅入深

    编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...

  3. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  4. vue-router 编程式路由

    $route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...

  5. VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)

    vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

  6. python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  7. SpringMVC 解析(四)编程式路由

    多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...

  8. vue编程式路由实现新窗口打开

    一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...

  9. Vue 编程式的导航

    1.应用场景 在同一路由的情况下,不同的参数之间进行切换 注意:别忘记初始化路由页面 2.用法 a.定义方法 b.实现方法 c.初始化路由页面 3.案例 <template> <di ...

  10. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

随机推荐

  1. SQL语句用法总结

    use quan56_goods; 使用数据库 show tables; 展示数据表 模糊查询 select * from tb_brand where name like '%林%'; 顺序 书写顺 ...

  2. 删除Mac版word上方的Mathtype

    原因 Mac升级到macOS Catalina v10.15.3发现mathtype用不了, Mathtype官网说目前暂时不支持这个版本的系统. 现在尴尬的是, mathtype删除了, 但一不小心 ...

  3. RPA的概念和优势

    大多数人每天都会使用到一些机器人流程自动化的工具,例如读取邮件和系统,计算.生成文件和报告.而在未来,那些你不想做的枯燥的工作,也许真的可以不做了,重复化.标准化的工作都可以让机器人帮你完成.想必此刻 ...

  4. 在CentOS上编译最新版linux内核(linux-5.19.9)

    从官网下载最新版的Linux内核源码,本教程使用linux-5.19.9进行编译. 实验环境(CentOS-Stream-8) $ uname -a Linux localhost.localdoma ...

  5. MybatisX无法自动生成entity实体类

    在做项目的时候,安装MybatisX插件可以让我们不用写实体类,加快我们的开发速度,让我们更专注于业务逻辑的开发,可是最近在做项目的时候,发现MybatisX插件的MybatisX-Generator ...

  6. Jquery 和 Vue 入门学习

    0x01 前言 ​ 零零散散学完了html.css.javascript的基础知识,但感觉写不了什么炫酷的前端界面,始终对前端开发有种生疏感.而时间的流逝也总会让我忘却零碎学习到的知识!为了改变这种尴 ...

  7. 别再傻傻分不清 AVSx H.26x MPEG-x 了

    在音视频发展的历程中,编解码无疑是其最核心的功能,编解码标准的更新换代也极大促进了音视频技术的发展以及行为模式的变更.从电视到网络视频以及现在的网络直播.点播.音视频会议等等,这些变化的背后都离不开音 ...

  8. 自己动手从零写桌面操作系统GrapeOS系列教程——20.汇编语言读硬盘实战

    学习操作系统原理最好的方法是自己写一个简单的操作系统. 本讲我们设计一个简单的读硬盘实验.通过一定的方法使硬盘第二个扇区的前3个字节依次为1.2.3,最后3个字节依次为3.2.1,中间的506个字节全 ...

  9. Linux设备驱动那些事

    目的 初步了解 linux 设备驱动框架模型 初步了解设备驱动模型有哪些元素 设备驱动模型元素的说明及解释 设备驱动模型元素的工作原理 设备驱动模型的小例子 对整体有个粗略的了解,设备驱动类型种类太多 ...

  10. IDA 逆 WDF 驱动时的函数识别插件

    快一年没更新了,累,工作累,各种累,想换个工作,突然发现找不到合适的工作了,哎,自己往火坑里跳,怪不得别人. import idautils import idaapi import idc prin ...