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= ...
随机推荐
- effective c++ 笔记 (26-29)
//---------------------------15/04/09---------------------------- //#26 尽可能延后变量定义式的出现时间 { /* 1:只要 ...
- 软件工程第二次作业(One who wants to wear the crown, Bears the crown.)
小镓自述Eclipse使用及自动单元测试技术 因为本人对JAVA有一些兴趣,所以就决定用Eclipse来完成这次作业,从安装Eclipse到学习写代码,最后学会用Junit来进行单元测试.这段过程给我 ...
- OpenCV调整彩色图像的饱和度和亮度
问题 如何调整彩色图像的饱和度和亮度 解决思路 详细步骤: 将RGB图像值归一化到[0, 1] 然后使用函数cvtColor进行色彩空间的转换 接下来可以根据处理灰度图像对比度增强伽马变换或者线性变换 ...
- 金蝶K3 11.0 WISE版本盘点机PDA条码数据采集器仓库条码管理
- Kafka高性能吞吐关键技术分析
Apache Kafka官网提供的性能说明: Benchmarking Apache Kafka: 2 Million Writes Per Second (On Three Cheap Machin ...
- 微软职位内部推荐-SW Engineer II for Embedded System
微软近期Open的职位: Do you have a passion for embedded devices and services?   Does the following m ...
- 《Linux内核分析》第三周学习报告
<Linux内核分析>第三周学习报告 ——构造一个简单的Linux系统MenuOS 姓名:王玮怡 学号:201351 ...
- 作业三:LINUX内核的启动过程
作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...
- TensorFlow常用API汇总
1.tensorflow的基本运作为了快速的熟悉TensorFlow编程,下面从一段简单的代码开始: import tensorflow as tf #定义‘符号’变量,也称为占位符 a = tf.p ...
- 动态规划刷题集python代码
1 爬楼梯(Fibonacci) #有一楼梯共M级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法? def fun(m): c = [0]*m c[0] = 1 c[1] = 2 for i ...