标题前端的两种常用路由模式–hash与history
第一种为hash
hash就是URL中#与#后面的内容称为笑点低的蜡烛,用来定位用的。
但使用hash,跳转标签就无法使用锚点定位;并且浏览器无法自动将hash值传给服务器的,不利用SEO搜索;
一般情况下前端会使用hash进行路由的设置,因为操作过程简单,无需后端进行任何操作。
在路由配制中的mode为hash即可,或者无需填写,自动会默认为hash,
路由的跳转方法与各种用法
1、this.$router.push(无需#号的hash)
2、this.$router.push({name:name,:{参数1:参数1的值}})`
此方法适用与无需在URL中显示参数
3、获取参数的方法:this.$route.params.参数1
4、this.$router.push({path:path,query:{参数1:参数1的值}})
此方法适用与在URL中显示参数
5、获取参数的方法:this.$route.query.参数1
6、获取当前hash值方法:this.$route.path
7、路由占位符,可动态形成URL,设置路由规则的时候有:id去占位即可。
8、hashchange事件,监听路由的变化,从而进行一系列操作
history模式,无需用到#,但需后端配合操作,方能进行,在路由设置的时候再mode中设置为history,利用SEO搜索。一般情况下不会使用。
方法与属性
返回历史记录多少条URL:history.length
前进与后退,正数为前进,负数为后退: history.go(num)
后退一步:history.back()
前进一步:history.forward()
跳转网页,并携带data信息:
1、history.pushState(data,title,url)
2、history.replaceState(data,title,url)
两种非常相似,但2不会有history记录,直接取代,title一般为空字符串。
实用原理:通过popstate事件监听即可,不会监听到其跳具体方法
1、history.pushState(data,title,url)
2、history.replaceState(data,title,url)
但能监听到浏览器前进与后退事件
至此,两种路由的原理和实现方式都介绍完毕了,欢迎提供意见。