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= ...
随机推荐
- Flutter - ListView禁止用户上下滑动
ListView禁止用户上下滑动可以使用physics属性 physics: const NeverScrollableScrollPhysics()
- phpmyadmin连接MySQL服务器被拒绝
显示: phpMyAdmin 尝试连接到MySQL服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 原因: 可能是修改了 ...
- install opencv 2.4.10 with issue :"nvcc fatal : Unsupported gpu architecture 'compute_11'"
issue: nvcc fatal : Unsupported gpu architecture 'compute_11'CMake Error at cuda_compile_generated ...
- java批量爬取电影资源
摘要 网上有很多个人站来分享电影资源,其实有时候我们自己也想做这个一个电影站来分享资源.但是这个时候就有一个问题,电影的资源应该从哪里来呢?难道要自己一条条手动去从网络上获取,这样无疑是缓慢而又效率低 ...
- Jq_javascript跨域问题
为什么浏览器不能跨域 现在很多人特别是前端开发人员,在ajax请求,XMLHttpRequest的过程中会碰到一个问题,那就是跨域请求: 当我们javaScript脚本试图跨域访问时,浏览器会告诉 ...
- 回溯-uva129
题目链接:https://vjudge.net/problem/UVA-129 题解: 这道题卡了一会儿的时间,一开始最大的问题是如何判断添加了一个字符之后,该字符串是不是一个困难的串,解决办法是:利 ...
- manjaro安装软件
fcitx 安装以下包 fcitx-googlepinyin kcm-fcitx 安装了输入法之后,还要在/etc/profile或~/.xprofile里添加如下内容: export GTK_IM_ ...
- kettle开源项目部署文档
kettle开源项目部署文档 1.kettle简介 kettle是一款国外开源的ETL(Extract Transform Load)工具,纯java编写,可以在Windows.Linux.Unix上 ...
- 详解JavaScript中的Event Loop(事件循环)机制
前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...
- PAT甲题题解-1038. Recover the Smallest Number (30)-排序/贪心,自定义cmp函数的强大啊!!!
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789138.html特别不喜欢那些随便转载别人的原创文章又不给 ...