vue的静态路由和动态路由

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.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里进行切换

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

优点：

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

缺点：

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