借助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 编程式导航的更多相关文章

  1. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  2. Vue路由编程式导航以及hash模式

    import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...

  3. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  4. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  5. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  6. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  7. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  8. vue中声明式导航和编程式导航

    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...

  9. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  10. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

随机推荐

  1. 华为测试大牛Python+Django接口自动化怎么写的?

    有人喜欢创造世界,他们做了开发者:有的人喜欢开发者,他们做了测试员.什么是软件测试?软件测试就是一场本该在用户面前发生的灾难提前在自己面前发生了,这会让他们生出一种救世主的感觉,拯救了用户,也就拯救者 ...

  2. Selenium+Python自动化测试环境搭建和搭建过程遇到的问题解决

    环境搭建: 第一步:安装Python  网址:https://www.python.org/ 按照如图提示安装,并且配置环境变量(安装时候选中pip会自动安装Python的包管理工具 pip,推荐选择 ...

  3. 《Pro SQL Server Internals, 2nd edition》的CHAPTER 3 Statistics中的Introduction to SQL Server Statistics、Statistics and Execution Plans、Statistics Maintenance(译)

    <Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...

  4. Mac下搭建lamp

    Mac下搭建lamp Mac 自带了Apache,并默认支持PHP环境,只需要配置Apache和PHP即可使用.需要单独安装mysql服务端. Apache 基础配置 Apache支持PHP配置 Ap ...

  5. C++ 多态Polymorphism 介绍+动态绑定、静态绑定

    什么是多态? 多态(polymorphism)一词最初来源于希腊语polumorphos,含义是一种物质的多种形态. 在专业术语中,多态是一种运行时绑定机制(run-time binding) ,通过 ...

  6. 12.23daily_scrum

    今天大家的工作重心在调试过程中,以便及时地发现和解决在调试过程中出现的问题和漏洞,悬浮窗测试工作也已经展开,主要集中在边缘设计代码的测试部分,具体工作如下: 具体工作: 小组成员 今日任务 明日任务 ...

  7. React组件继承的由来

    没有显式继承的时候我们这么写: import * as React from "react"; export interface HelloProps { compiler: st ...

  8. 使用redis防止抢购商品超卖

    前言: redis不仅仅是单纯的缓存,它还有一些特殊的功能,在一些特殊场景上很好用. 本篇博文用来测试下使用redis来防止抢购商品超卖问题. 内容: 使用redis的list进行测试 思路是设置一个 ...

  9. Beta冲刺——day4

    Beta冲刺--day4 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  10. Cisco Packet Tracer 交换机 2950-24 配置

    大步骤1:设置交换机名字.特权模式口令.本地管理口令.远程登入口令  Switch>en   进入特权模式 Switch#conf t    进去全局配置模式 Enter configurati ...