欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue的静态路由和动态路由

程序员文章站 2024-02-12 13:22:58
...

One
Two
路由(vue-router)
路由安装
路由跳转
静态路由
动态路由
路由配置path

vue中通过路由跳转的三种方式

标签路由 router-link

<router-link to='需要跳转到的页面的路径></router-link>

浏览器在解析时,将它解析成一个类似于 < a > 的标签

this.$router.push()

this.$router.replace()

用法同上

ps : this. $ router.push()和this. $ router.replace()的区别

this. $ router.push()
跳转到指定url路径,并向history栈中添加一个记录,点击后退会返回到上一个页面
this. $ router.replace()
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)

前端路由实现原理主要通过

利用H5的history API实现

主要通过 history.pushStatehistory.replaceState 来实现,不同之处在于,pushState会增加一条新的历史记录,而replaceState则会替换当前的历史记录

back、forward、go三个方法

对应浏览器的前进,后退,跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

利用url的hash实现

使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载,其显示的网路路径中会有 “#” 号,路由里的 # 不叫锚点,我们称之为 hash , 主要利用监听哈希值的变化来触发事件 —— hashchange 事件来做页面局部更新 , 这是最安全的模式,因为他兼容所有的浏览器和服务器。
缺点:只能改变#后面的来实现路由跳转。

总结:

hash 方案兼容性好,而H5的history主要针对高级浏览器。

abstract模式

适用于所有JavaScript环境,例如服务器端使用Node.js。如果没有浏览器API,路由器将自动被强制进入此模式

const router = new VueRouter({routes, mode:'abstract',})

模式都在mode里进行切换

静态路由与动态路由的区别

优点:

静态路由:简单、高效、可靠、网络安全、转发效率高。
动态路由:灵活,能够适时适应网络结构的变化,无需管理员手工维护,减轻了管理员的工作负担。

缺点:

静态路由:不能灵活的适应网络的动态变化。
动态路由:占用网络带宽(用于传输路由更新信息)。

相关标签: vue