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= ...
随机推荐
- grunt源码解析:整体运行机制&grunt-cli源码解析
前端的童鞋对grunt应该不陌生,前面也陆陆续续的写了几篇grunt入门的文章.本篇文章会更进一步,对grunt的源码进行分析.文章大体内容内容如下: grunt整体设计概览 grunt-cli源码分 ...
- VirtualBox虚拟机怎么导入已经存在的vdi文件
VirtualBox虚拟机怎么导入已经存在的vdi文件 第一章 1.原因 早上一不小心将virtualBox 卸载了,(不知道怎么了, 里面得虚拟机全部都没有了,但是vdi文件还在) 2.解决办法 直 ...
- 关于go v1.11安装后出现不能正常运行测试程序的问题
本人最近安装go1.11后出现上述问题,没有找到原因,可能之前安装过的旧的版本在windows下环境变量设置出现了问题,修改后仍然无效,后来删除所有安装版本,及go环境变量,重新下载1.10版本进行安 ...
- SqlHelper DBHelper
根据自己项目的开发需要,整理了一个SqlHelper类 相比较网上通用的SqlHelper类方法主要有一下几点的不同: 1.因为要操作多个数据库,所以数据库连接字符串没有写死到方法里,作为参数提供出来 ...
- SCRUM 12.15
今天我们所有的团队成员都加速的进行着开发.虽然最近3门大作业压着,我们还是抽出了足够多的时间对项目的M2阶段进行完善. 今天我们完成了清除缓存的功能,另外我们的单页爬虫也已经设计完成,我们的进度在我们 ...
- Linux内核分析课程期中总结
Linux内核分析课程期中总结 姓名:王朝宪 学号:20135114 注: 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com ...
- Linux内核分析-两种方式使用同一个系统调用
实验部分 根据系统调用表,选取一个系统调用.我选得是mkdir这个系统调用,其系统调用号为39,即0x27 由于mkdir函数的原型为 int mkdir (const char *filename, ...
- page = new String(request.getQueryString().getBytes("ISO-8859-1"),"GBK");解决前台传后台乱码问题
page = new String(request.getQueryString().getBytes("ISO-8859-1"),"GBK");解决前台传后台 ...
- C语言版本:单链表的实现
slist.h #ifndef __SLIST_H__ #define __SLIST_H__ #include<cstdio> #include<malloc.h> #inc ...
- ElasticSearch 2 (33) - 信息聚合系列之聚合过滤
ElasticSearch 2 (33) - 信息聚合系列之聚合过滤 摘要 聚合范围限定还有一个自然的扩展就是过滤.因为聚合是在查询结果范围内操作的,任何可以适用于查询的过滤器也可以应用在聚合上. 版 ...