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

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

// 字符串
router.push('home') // 命名的路由
router.push({ name: 'user', params: { userId: }}) // 对象
router.push({ path: 'home' }) // 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
//如果提供了 path,params 会被忽略,需完整设置路径:
const userId = 123;
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
//在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数

router.push(location, onComplete?, onAbort?)//导航成功完成或中止时
router.replace(location, onComplete?, onAbort?) //replace它不会向 history 添加新记录
<router-link :to="..." replace>
《==》
router.replace(...)
router.go(n)
// 在浏览器记录中前进一步,等同于 history.forward()
router.go() // 后退一步记录,等同于 history.back()
router.go(-1) // 前进 3 步记录
router.go() // 如果 history 记录不够用,那就默默地失败呗
router.go(-)
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. 第 3 章 镜像 - 016 - Dockerfile 常用指令

    Dockerfile 常用指令 1.FROM 指定base镜像2.MAINTAINER 设置镜像的作者,可以为任意字符串3.COPY 从build context 复制到镜像 COPY 支持两种形式: ...

  2. fiddler学习笔记&&基本使用

    周末在网上找了些fiddler相关的资料来看,学习下如何使用这个工具(平时接口测试用得比较多,在没有接口文档的情况下,可以通过抓包工具来提取需要测试的接口,ps.好久没写博客了,争取5月结束前再写2篇 ...

  3. 在远程连接一个 Wndows 10的情况下,重启远程机器

    如果你从菜单找的话,是找不到这个菜单的!!! 你应该直接按 alt + F4 , 就会出现这个选项了. 参考: https://tommynation.com/shut-windows-10-remo ...

  4. 2017-2018-2 20165327 实验二 《Java面向对象程序设计》实验报告

    20165327<Java程序设计>实验二 <Java面向对象程序设计>实验报告 实验二 <Java面向对象程序设计> 一.实验报告封面 课程:Java程序设计 班 ...

  5. LeetCode--042--接雨水(java版)

    给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种情况下,可以接 ...

  6. 小程序点击跳转外部链接 微信小程序提示:不支持打开非业务域名怎么办 使用web-view 配置业务域名

    小程序点击跳转外部页面 1.index.wxml  添加点击事件   标签可以是小程序支持的 <!-- 邀请好友 --> <cover-image src='/img/invitat ...

  7. vscode插件之C/C++

    目录 1.给C/C++调试器配置launch.json 2.配置VS Code的调试行为 3.配置目标应用 4.自定义GDB或者LLDB 5.调试dump(转储)文件 6.远程调试或者本地服务器上调试 ...

  8. [Fiddler] ReadResponse() failed: The server did not return a complete response for this request. Server returned 0 bytes.

    待解决 [Fiddler] ReadResponse() failed: The server did not return a complete response for this request. ...

  9. 『PyTorch』第二弹_张量

    参考:http://www.jianshu.com/p/5ae644748f21# 几个数学概念: 标量(Scalar)是只有大小,没有方向的量,如1,2,3等 向量(Vector)是有大小和方向的量 ...

  10. js动态修改title

    问题描述: 由于微信浏览器只在页面首次加载时初始化了标题title,之后就没有再监听 window.title的change事件.所以这里修改了title后,立即创建一个请求,加载一个空的iframe ...