【Vue2】编程式路由导航
在Vue Router中,除了使用 创建 a 标签来定义导航链接之外,还可以使用Vue Router通过编写代码来实现导航.
他提供的三个实例方法:router.push、router.replace和router.go,使用起来相较于声明式导航更加灵活
这些方法都在VueRouter的原型对象上.这些方式都可以通过this.$router来访问到
router.push
<rotuer-link to=" "></router-link>内部默认调用的是该方法。- 该方法可以传入三个参数:
location跳转路由信息参数与<rotuer-link to=" "></router-link>中的to一致resolve成功回调reject失败回调
this.$router.push(location,($router)=>{...},(err)=>{...})
// 对象携带参数的方式调用
this.$router.push({
//path:"/search" path与params不可以同时使用
name:'search',
params:{...},
query:{...}
},
$router=>{},
err=>{...}
)
它会向 history 栈添加一个新的记录,当进行后退操作时会回到之前访问的路径。

例如我们访问了:8080:/home/ -> :8080/home/search/ -> :8080/home/search?kw=abc -> :8080/abc/
他就会把先访问的放在最下面,后访问的放在最上面,后退的时候就会后入先出,从上而下取出
router.replace
该方法与router.push唯一不同的地方就是通过该方法访问的路由会替换掉最新一个历史记录。
router.go
使用该方法可以操作浏览器在历史记录中的前进与后退,
- 当提供了一个大于0的正整数时,浏览器的路径会在history栈中向上移动对应的步数,
- 当提供了一个小于0的负整数时,浏览器的路径会在history栈中向下移动对应的步数
- 当提供了一个为0的参数时,浏览器会刷新页面
下面是router.go的使用实例this.$router.go(1) // 前进一个页面
this.$router.go(0) // 刷新页面
this.$router.go(-1) // 后退一个页面
【Vue2】编程式路由导航的更多相关文章
- vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...
- vue.js编程式路由导航 --- 由浅入深
编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- vue-router 编程式路由
$route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...
- VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
- python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)
昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...
- SpringMVC 解析(四)编程式路由
多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...
- vue编程式路由实现新窗口打开
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...
- Vue 编程式的导航
1.应用场景 在同一路由的情况下,不同的参数之间进行切换 注意:别忘记初始化路由页面 2.用法 a.定义方法 b.实现方法 c.初始化路由页面 3.案例 <template> <di ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
随机推荐
- ubuntu下删除U盘文件到回收站无法清空问题的解决
Ubuntu可以自动加载U盘 每当,拷贝新的文件,而空间不足的时候,就会删除原有的文件. 可是,它不是彻底删除,而是放在垃圾箱中(/home/mrc/.local/share/Trash/files) ...
- What Are You Weighting For?
A basic strength routine can change your life Strength training isn't just about getting six-pack ab ...
- 手写深度比较isEqual函数
function isObject(obj){ return typeof obj ==='object'&&obj!==null } functon isEqual(obj1,obj ...
- json.dumps和json.loads,get和post
一.json.dumps()和json.loads()概念理解 1.json.dumps()和json.loads()是json格式处理函数(可以这么理解,json是字符串) json.dumps() ...
- Spring-设计模式
1.1开闭原则 开闭原则(open-closed principle,OCP)是指一个软件实体(如类,模块和函数)应该对扩展开放,对修改关闭.所谓的开闭,也正是对扩展和修改两个行为的一个原则. 强调用 ...
- Web For Pentester - SQL injections/Directory traversal
SQL injections Example 1 典型的SQL注入 name=root' or 1=1 %23 直接执行就可以导出所有用户 查看后端的源码 观察到,我们传入入的name中,传入就成为了 ...
- 网络安全(中职组)-B模块:Web安全渗透测试
Web安全渗透测试任务环境说明: 服务器场景:PYsystem003(关闭链接)服务器操作系统:未知用户名:未知 密码:未知 1. 通过浏览器访问http://靶机服务器IP/1,对该页面进行渗 ...
- MySQL 开发规范【X千万/表级别】
一.MySQL 开发规范概述 原则:SQL开发规范制定是基于良好的编码习惯和可读性:目的:消除冗余,数据简约,提高效率,提高安全:范围:<SQL开发规范手册> 二.MySQL 开发规范手册 ...
- Lombok首字母小写,第二个字母大写,jackson反序列化失败
记一次接口调用字段映射失败问题排查 在写接口的时候遇到一个很神奇的问题,编写一个post接口,在使用包装类接收body的时候发现有个字段映射不上.代码如下 @RestController public ...
- Azure Terraform(十三)提升 Azure Web App Plan 的性能
一,引言 一,引言 我们是否正在为部署在云主机上的应用程序性能缓慢和停机问题而苦恼?我们是否正在因为云主机上仅仅部署了应用程序,在流量平缓的时候而浪费大量的计算资源而心疼荷包.那么让我们来一起看看 A ...