vue-router 编程式导航
借助vue-router的实例方法,通过编写代码来实现导航的切换:
- back:回退一步
- forward:前进一步
- go:指定前进回退步数
- push:导航到不同url,向history栈添加一个新的记录
- replace:导航到不同url,替换history栈中当前记录
methods: {
handleBack () {
this.$router.back()
},
handleForward () {
this.$router.forward()
},
handleGo () {
this.$router.go(-1)
},
handlePush () {
// this.$router.push('/document')
this.$router.push({ path: '/document' })
},
handleReplace () {
this.$router.push({ path: '/document' })
}
}
vue-router 编程式导航的更多相关文章
- vue路由-编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...
- Vue路由编程式导航以及hash模式
import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- vue编程式导航
vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...
- [vue]声明式导航和编程式导航
声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
- Vue 路由的编程式导航与history模式
编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...
- 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= ...
随机推荐
- Partition4:增加分区
在关系型 DB中,分区表经常使用DateKey(int 数据类型)作为Partition Column,每个月的数据填充到同一个Partition中,由于在Fore-End呈现的报表大多数是基于Mon ...
- 事务特性,事务的隔离级别,并发事务可能出现的问题,spring事务 数据库锁
1.0 事务特性(ACID) Atomicity:原子性,一个事务不可以被拆分 Consistency:一致性,在事务执行前数据库的数据处于正确的状态,而事务执行完成后数据库的数据还是处于正确的状态, ...
- Microsoft Dynamics CRM 增删改子表汇总子表的某个字段到主表的某个字段(通用插件)
背景 经常有某个汇总子表的数量到主表的总数量,或者汇总子表的总价到主表的总价这种需求. 传统的做法: 1.就是为每个子表实体单独写成一个插件,但是这样不好复用. 2.主表的汇总字段是汇总货币类型,但是 ...
- Js_图片切换左右点击
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- 回溯-uva129
题目链接:https://vjudge.net/problem/UVA-129 题解: 这道题卡了一会儿的时间,一开始最大的问题是如何判断添加了一个字符之后,该字符串是不是一个困难的串,解决办法是:利 ...
- 区块链Hyperledger Fabric 学习记录(一)开发环境搭建(ubuntu16.04/ubuntu18.04)
目录 Fabric开发环境搭建 更新说明 教程环境及软件版本 Docker 安装Docker 配置用户组 配置Aliyun Docker加速器 安装docker-compose Go 下载源码 安装源 ...
- 主流蓝牙芯片盘点,Nordic/TI/博通哪家强?
无线通信技术自19世纪中期诞生以来,从使用狼烟.火炬.闪光镜.信号弹等在视距内传输信息,到1838年塞缪尔・莫尔斯发明电报网,再到电报网被电话取代,再到几十年后的1895年马可尼首次从英国怀特岛到30 ...
- img 分区响应图
---恢复内容开始--- a标签的target为_blank属性,意为跳转到新的页面. shape要和coords配合使用,shape为rect时意义为矩形.shape 为不同属性时意为不同的形态触碰 ...
- Beta阶段敏捷冲刺②
1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 1.1昨天已完成的工作. 姓名 昨天已完成的工作 徐璐琳 完成设置界面的排版 祁泽文 实 ...
- CentOS下搭建Hadoop
目录 安装配置jdk 安装Hadoop 下载解压 配置文件 启动hadoop 格式化HDFS 停止hdfs和yarn 参考:Hadoop官网文档 版本:hadoop-3.2.0 安装配置jdk 因ha ...