vue-router-4-编程式导航
想要导航到不同的 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-编程式导航的更多相关文章
- Vue 路由的编程式导航与history模式
编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...
- 11.vue-router编程式导航
页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的链接或vue中的 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航 例如: ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- vue编程式导航
vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...
- [vue]声明式导航和编程式导航
声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
- vue中声明式导航和编程式导航
官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...
- vue编程式导航,命名路由
//使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- vue-router中参数传递 && 编程式导航 && 坑 && beforeRouteEnter
第一部分: vue-router参数传递 通过router-link我们可以向路由到的组件传递参数,这在我们实际使用中时非常重要的. 路由: { path:"/DetailPage" ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
随机推荐
- XLua访问C#中的List或者数组
直接访问即可 以下截图是C#中的List与数组: 现在通过XLua修复一下 RequestRoomListRes 方法(这里主要关注list和数组在XLua中的访问方式,对数组与List的遍历用了两种 ...
- 数据结构(C语言版)-第3章 栈和队列
3.1 栈和队列的定义和特点3.2 案例引入3.3 栈的表示和操作的实现3.4 栈与递归3.5 队列的的表示和操作的实现3.6 案例分析与实现 基本操作有入栈.出栈.读栈顶元素值.建栈.判断栈满.栈空 ...
- for...in和for...of循环的区别
使用for...in和for...of分别对Array,Set,Map做测试 var a=["A","B","C"]; var b=new ...
- 框架设计——View
[demo]: ZZSZYFP : UserControl, INavigateMdiControl(1)继承自UserControl,并实现了 INavigateMdiControl接口(2)限制表 ...
- android -------- java虚拟机和Dalvik虚拟机
java虚拟机 虚拟机是一种抽象化的计算机,通过在实际的计算机上仿真模拟各种计算机功能来实现的.Java虚拟机有自己完善的硬体架构,如处理器.堆栈.寄存器等,还具有相应的指令系统.Java虚拟机屏蔽了 ...
- apiClould微信三方登录,qq三方登录
三方登录需要在config.xml文件中配置一下,res文件下需要新建一个key.xml文件中也需要配置,请点击链接查看详情 微信:https://docs.apicloud.com/Client-A ...
- 小程序传id值
xml文件 <view class='bgcf bsbb pl30 pr30 pt30 pb30 df fww' > <block wx:for="{{intr ...
- 2.5 UML顺序图
相关概念 交互 对象之间为实现某一功能而必须实施的协作过程.动态行为,称为交互 消息 对象间的协作与交流表现为一个对象以某种方式启动另一个对象的活动,这种交流在 UML里被定义为消息 顺序图的建模元素 ...
- python基础之 026 包以及包的引入
内容梗概: 1. from xxx import xxx知识点补充 2. 包 1. 知识点补充. 我们现在知道可以使⽤用import和from xxx import xxx来导入一个模块中的内容.那有 ...
- 『计算机视觉』Mask-RCNN_锚框生成
Github地址:Mask_RCNN 『计算机视觉』Mask-RCNN_论文学习 『计算机视觉』Mask-RCNN_项目文档翻译 『计算机视觉』Mask-RCNN_推断网络其一:总览 『计算机视觉』M ...