$route -> 使用它的属性

$router-> 使用它的方法

编程式的导航,即js控制跳转

//声明式:<router-link :to="...">
//编程式:this.$router.push('home')

另一种跳转

//声明式:<router-link :to="..." replace>
//编程式:this.$router.replace('home')

$router.push

放入跳转的路由/路径

想要导航到不同URL,则使用 router.push 方法

//比如:this.$router.push('/c')

push可以是字符串可以是对象也可以带查询参数

//字符串
router.push('home') // 对象
router.push({ path: 'home' }) // 命名的路由
router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

$router.go

在 history 记录中向前或者后退多少步,类似window.history.go(n)

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1) // 后退一步记录,等同于 history.back()
router.go(-1) // 前进 3 步记录
router.go(3) // 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)

$router.replace(location)

把当前路径替换成xxx,比如:['/','/a','/c']

replace 与 push不同的是:

它不会向 history 添加新记录,而是替换掉当前的 history 记录
(使用replac跳转的 后腿按钮不能点击 )

vue-router 编程式路由的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

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

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

  9. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

随机推荐

  1. CF1117F. Crisp String

    题意 给出表格,表示字母间"相邻"关系 保证给定字符串所有相邻字母"相邻" 删除某种字母时 要保证其两侧字母"相邻" 即删除后还是相邻字母& ...

  2. Linux 遍历目录下面所有文件,将目录名、文件名转为小写

    当你从 Windows 服务器换到 Linux 服务器的时候,以前的上传目录的目录名.文件名会遇到大小写的问题.在 Windows 环境下面没有文件区分大小写的概念,而 Linux 却有严格的文件名大 ...

  3. linux中$#,$0,$1,$2,$@,$*,$$,$?的含义

    $# 是传给脚本的参数个数$0 是脚本本身的文件名$1 是脚本后接的第一个参数$2 是脚本后接的第二个参数$@ 是传给脚本的所有参数列表,"$1" "$2" & ...

  4. rt-thread中动态内存分配之小内存管理模块方法的一点理解

    @2019-01-18 [小记] rt-thread中动态内存分配之小内存管理模块方法的一点理解 > 内存初始化后的布局示意 lfree指向内存空闲区首地址 /** * @ingroup Sys ...

  5. 「FJOI2016」神秘数 解题报告

    「FJOI2016」神秘数 这题不sb,我挺sb的... 我连不带区间的都不会哇 考虑给你一个整数集,如何求这个神秘数 这有点像一个01背包,复杂度和值域有关.但是你发现01背包可以求出更多的东西,就 ...

  6. 源码分析-AutoCloseable

    AutoCloseable 该接口用于try-with-resources语法糖提供支持,用于自动关闭资源作用 类型:接口 方法:close(); 详解: close():用于自动关闭资源的时候需要进 ...

  7. Typescript学习笔记(二)枚举

    跟随handbook的脚步,详细介绍一下枚举. enum Direction { Up = 1, Down, Left, Right } 一个枚举类型可以包含零个或多个枚举成员,每个枚举成员可以是一个 ...

  8. 这些保护Spring Boot 应用的方法,你都用了吗?

    这些保护Spring Boot 应用的方法,你都用了吗? 生如夏花 SpringForAll社区 今天 Spring Boot大大简化了Spring应用程序的开发.它的自动配置和启动依赖大大减少了开始 ...

  9. Spring Boot 1.X和2.X优雅重启实战

    纯洁的微笑 今天 项目在重新发布的过程中,如果有的请求时间比较长,还没执行完成,此时重启的话就会导致请求中断,影响业务功能,优雅重启可以保证在停止的时候,不接收外部的新的请求,等待未完成的请求执行完成 ...

  10. (五)Oracle 的 oracle 表查询

    http://www.hechaku.com/Oracle/oracle_tables_chack.html 通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salg ...