$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. Codeforces Bubble Cup 11 J. Moonwalk challenge加强版

    题意 有一棵 \(n\) 个节点的树,每条边上有一个字符,有 \(m\) 次询问. 每次会选定两个点 \(u, v\) , \(u\) 到 \(v\) 的路径上的字符形成了一个字符串 \(T\) ,再 ...

  2. 【BZOJ5308】[ZJOI2018]胖(模拟,ST表,二分)

    [BZOJ5308][ZJOI2018]胖(模拟,ST表,二分) 题面 BZOJ 洛谷 题解 首先发现每条\(0\)出发的边都一定会更新到底下的一段区间的点. 考虑存在一条\(0\rightarrow ...

  3. hexo博客添加功能

    设置Hexo主题模式 Hexo主题中,有三种不同的模式,通过切换模式,让NexT主题显示不一样的样式.在NexT根目录下有一个同样名称为_config.yml,为了区分hexo根目录下的_config ...

  4. macOS在virtualenv中使用wxPython报错

    在虚拟的Python环境中运行GUI的软件报错 This program needs access to the screen. Please run with a Framework build o ...

  5. tyvj/joyoi 1336 火车进栈

    比原题水了很多(因为原题要高精度) 输出字典序前20种出栈序列. 其实是贪心题:我们每次确定一个出栈的数. 当栈里有数时,字典序显然比从后面拿数要小,所以先搜这个. 之后依次搜后面队列里的数,因为字典 ...

  6. A1126. Eulerian Path

    In graph theory, an Eulerian path is a path in a graph which visits every edge exactly once. Similar ...

  7. 如何使用Senparc.Weixin SDK 底层的Redis缓存并设置过期时间

    最近在微信第三方平台项目开发中,有一个需求,所有绑定的公众号的回复规则按照主公众号的关键词配置来处理,我的处理思路是获取主公众号配置的关键词回复规则,缓存10分钟,由于需要使用Redis缓存来存储一些 ...

  8. 第二十五篇-Android 应用资源

    这里介绍android的一些资源文件. 以一个登录界面为例. layout.xml <?xml version="1.0" encoding="utf-8" ...

  9. 团体程序设计天梯赛(CCCC) L3012 水果忍者 上凸或下凹的证明

    团体程序设计天梯赛代码.体现代码技巧,比赛技巧.  https://github.com/congmingyige/cccc_code #include <cstdio> #include ...

  10. my97DatePicker选择年、季度、月、周、日(转)

    My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 下面总结下使用该日历控件选择年.季度.月.周.日的方法. 1.选择年 <input id="d1212&quo ...