想要导航到不同的 URL,用 router.push 方法,会向 history 栈添加一个新的记录

<router-link> 《==》router.push

  1. // 字符串
  2. router.push('home')
  3.  
  4. // 命名的路由
  5. router.push({ name: 'user', params: { userId: }})
  6.  
  7. // 对象
  8. router.push({ path: 'home' })
  9.  
  10. // 带查询参数,变成 /register?plan=private
  11. router.push({ path: 'register', query: { plan: 'private' }})
  1. //如果提供了 path,params 会被忽略,需完整设置路径:
  2. const userId = 123;
  3. router.push({ name: 'user', params: { userId }}) // -> /user/123
  4. router.push({ path: `/user/${userId}` }) // -> /user/123
  1. //在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数
  2.  
  3. router.push(location, onComplete?, onAbort?)//导航成功完成或中止时
  4. router.replace(location, onComplete?, onAbort?)
  5. //replace它不会向 history 添加新记录
  6. <router-link :to="..." replace>
  7. 《==》
  8. router.replace(...)
  1. router.go(n)
  2. // 在浏览器记录中前进一步,等同于 history.forward()
  3. router.go()
  4.  
  5. // 后退一步记录,等同于 history.back()
  6. router.go(-1)
  7.  
  8. // 前进 3 步记录
  9. router.go()
  10.  
  11. // 如果 history 记录不够用,那就默默地失败呗
  12. router.go(-)
  13. router.go()

vue-router-4-编程式导航的更多相关文章

  1. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  2. 11.vue-router编程式导航

    页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接或vue中的 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航 例如: ...

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

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

  4. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  5. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  6. vue中声明式导航和编程式导航

    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...

  7. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  8. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  9. vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter

    第一部分: vue-router参数传递 通过router-link我们可以向路由到的组件传递参数,这在我们实际使用中时非常重要的. 路由: { path:"/DetailPage" ...

  10. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

随机推荐

  1. python中socket模块详解

    socket模块简介 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常被叫做"套接字",用于描述IP地址和端口,是一个通信 ...

  2. English Voice of <<Dream it passible>>

    Dream It Possible(梦想成为可能) - DelaceyI will run I will climb I will soar.我奔跑,我攀爬 我要飞翔.I'm undefeated我所 ...

  3. You Don't Know JS: this & Object Prototypes( 第5章 Prototypes)

    qu上章提到过[[prototype]] chain, 本章详细分析 ⚠️所有试图模仿类复制的行为,如上章提到的mixins的变种,完全规避了[[Prototype]] chain机制,本章会谈到这方 ...

  4. Confluence 6 如何考虑设置一个空间的主页

    这空间是干什么的?空间主页是访问你空间的用户最先看到的页面.如果你在这个页面中包含一些你空间是干什么的内容能够帮助你的用户更加容易的访问你的空间,同时也能够让你的用户更加容易了解你正在工作的事情.你可 ...

  5. wdcp环境安装filephp扩展

    网址 :https://blog.csdn.net/m_nanle_xiaobudiu/article/details/80838424

  6. lanmp环境一键安装

    yum install -y wgetwget http://dl.wdlinux.cn/files/lanmp_v3.2.tar.gztar zxvf lanmp_v3.2.tar.gzsh lan ...

  7. genymotio安装apk包提示 ...abi ...cpu

    下载 Genymotion-ARM-Translation_v1.1 (1).zip 地址:http://qc1.androidfilehost.com/dl/Q-YDDKt4QaFNvKh62ppO ...

  8. C# 有哪些集合

    队列[Queue] //队列:先进先出 /* *增加元素到队列结尾处 *移除队列开始处 */ Queue queue=new Queue(); queue.Enqueue(Object); queue ...

  9. DP 要求将承载量花光的01背包问题

    前言:很久没有发博客了,以后会捡起来,之后很长一段时间内我都会把精力放在攻克DP问题上,所以会经常上传一些DP学习笔记,把一些比较好的,没见过类型的DP问题都会传上来,希望能够变强吧. 因为今天很清醒 ...

  10. Appium 自动化测试(1)--环境安装:安装Appium

    一.安装nodejs Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 安装过程参考:http://www.runoob.com/nodejs/n ...