vue的静态路由和动态路由
程序员文章站
2024-02-12 13:22:58
...
vue路由
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.pushState 和 history.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里进行切换
静态路由与动态路由的区别
优点:
静态路由:简单、高效、可靠、网络安全、转发效率高。
动态路由:灵活,能够适时适应网络结构的变化,无需管理员手工维护,减轻了管理员的工作负担。
缺点:
静态路由:不能灵活的适应网络的动态变化。
动态路由:占用网络带宽(用于传输路由更新信息)。