博客
关于我
VUE-编程式路由导航
阅读量:777 次
发布时间:2019-03-24

本文共 1202 字,大约阅读时间需要 4 分钟。

编程式路由导航

编程式路由导航是通过JS代码实现路由跳转的技术,适用于单页应用的路由管理。以下是实现细节和操作方法。

路由实现

路由实现主要通过以下两种方式实现:

1. Hash方式

hash方式通过改变URL的哈希值来实现路由跳转。主要特点是:

  • 浏览器记录历史会被更新,用户可以通过浏览器返回键回溯
  • Brower会监控哈希值的变化,可以根据哈希值获取当前路由

2. State/History API

State API提供了push和replace方法,用于对管理当前和历史状态。它们的区别在于:

  • push:将新路由压入栈,不影响当前任务stack
  • replace:新路由直接替换当前记录,不回退

两者都使用栈结构来管理历史记录,这使得路由系统更具层次性。

路由器$router的实现

路由器是一个栈结构,支持push、replace和back操作。典型的代码操作如下:

示例代码:
pushShow(id) {  this.$router.push(`/home/messages/MessageDetail/${id}`);},replaceShow(id) {  this.$router.replace(`/home/messages/MessageDetail/${id}`);},

路由器采用栈的作用方式,push操作会将新路由压入栈顶,replace则完全替换当前记录。这种栈结构使得路由系统具备良好的历史记录功能,比如back按钮可以实现前一路由的返回。

路由跳转方式

路由器提供了多种方式进行跳转,具体包括:

trailed

1. this.$router.push(path)

push方法主要用于点击路由链接,相当于普通链接点击后跳转。此方法保持当前路由历史记录,可以通过back返回当前页面。

2. this.$router.replace(path)

replace方法用于替换当前的路由记录,不会保留历史信息。如果用户使用replace跳转后,再点击back,就无法回到原来的页面。

3. this.$router.back()

back方法用于回到上一个路由记录,这个方法适合栈结构的路由系统,能有效管理页面的层次NullOrEmpty

4. this.$router.go(-1)

go方法和back功能一致,用于请求前一个路由记录。这两者在实现上可能存在细微差别,但作用相同。

技术要点

在使用路由器时需要注意以下几点:

1. 组件中自带$route和$router属性,$route用于获取当前路由信息,$router用于调用路由控制方法

2. $router提供的方法可与组件生命周期结合使用,确保路由变化时组件及时刷新

3. 栈结构的路由管理需要注意数据的深层次合并,避免数据覆盖和冲突

4. 路由参数传递要规范化,统一接收和处理方式有助于路由参数的安全和稳定

转载地址:http://yprkk.baihongyu.com/

你可能感兴趣的文章
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>
MFC模态对话框和非模态对话框
查看>>