【面試題】如何去掉vue的url地址中的#號?及其原理？
如何去掉vue的url地址中的#號?及其原理？
如何去掉vue的url地址中的#號?
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
// 1. 定義一些路由
// 每個路由都需要映射到一個組件。
const routes = [
{ path: '/home', component: ()=> import('../views//home.vue') },
{ path: '/about', component: ()=> import('../views/about.vue') },
]
const router = new VueRouter({
mode: 'hash', //默認是hash模式，url是帶#號的
// mode: 'history', //history模式url不帶#號
routes
})
export default router
hash模式實現原理
hash模式主要是根據url的hash值來跳轉不同的路由頁面。
採用hash模式的路由模式中，url後面有一個#，#後面包括#就是此路由的hash值，hash模式背後的原理是onhashchange事件,可以在window對象上監聽這個事件
vue中hash模式的原理就是通過監聽hash值的變化來匹配不同的組件，進而來重新渲染視圖。
優點
- 兼容性強，兼容性達到了IE8
- 除發送ajax和資源請求外不會發送其他多餘請求
- 改變#後的路徑、不會自動刷新頁面
- 無需服務端進行配合
缺點
- 訪問路徑上包含#,不美觀
- 對於需要錨點功能的需求會與當前路由機制發生衝突
- 重定向操作時，後段無法獲取url完整路徑。
監聽onhashchange事件案例：
src\views\home.vue
<template>
<div>
home
<button @click="handerHref">跳轉</button>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange)
},
computed:{
},
methods:{
handerHref(){
window.location.href = "//localhost:8080/#/about"
},
onhashchange(e){
console.log(e.oldURL,'home');
console.log(e.newURL);
console.log(location.hash);
}
}
}
</script>
<style scoped>
</style>
src\views\about.vue
<template>
<div>
about
</div>
</template>
<script>
export default {
name: 'about',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange)
},
computed:{
},
methods:{
onhashchange(e){
console.log(e.oldURL,'about');
console.log(e.newURL);
console.log(location.hash);
}
}
}
</script>
<style scoped>
</style>
history模式實現原理
優點
- 符合url地址規範, 不需要#, 使用起來比較美觀
- 可以使用history.state獲取完整的路由資訊
- 後端可以獲取到完整的路由資訊
缺點
- 兼容性只到IE10
- 改變url路徑後、會重新請求資源。
- 若訪問的路由地址不存在時、會報404,需服務端配合支援重定向返回統一的404頁面。
history路由中我們使用onpopstate事件函數來監聽history路由的變化，但是popstate事件函數只能監聽到history.go、forward、back的切換路由方式，但是它不能夠監聽到pushState添加歷史記錄（就是在頁面中點擊某個a標籤進行跳轉的方式，點擊頁面順序：a->b->c，記錄的歷史記錄中a、b、c都存在，而replaceState則不同）、replaceState（點擊頁面順序：a->b->c，記錄的歷史記錄中只有a->c，即用c代替了b記錄，b記錄被刪除了）切換路由的方式。
監聽popstate、pushState、replaceState事件案例：
src\views\home.vue
<template>
<div>
home
<button @click="handerHref">跳轉</button>
</div>
</template>
<script>
export default {
name: 'home',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange)
},
computed:{
},
methods:{
handerHref(){
window.location.href = "//localhost:8080/#/about"
},
onhashchange(e){
console.log(e.oldURL,'home');
console.log(e.newURL);
console.log(location.hash);
}
}
}
</script>
<style scoped>
</style>
src\views\about.vue
<template>
<div>
about
<button @click="handerBack">返回</button>
</div>
</template>
<script>
export default {
name: 'about',
data(){
return {
}
},
created(){
},
mounted() {
window.addEventListener('hashchange',this.onhashchange) //hash模式跳轉頁面觸發onhashchange事件
window.addEventListener("popstate", this.onpopstate) //popstate事件函數只能監聽到history.go、forward、back的切換路由方式，但是它不能夠監聽到pushState添加歷史記錄
// 但是它不能夠監聽到pushState添加歷史記錄（就是在頁面中點擊某個a標籤進行跳轉的方式，點擊頁面順序：a->b->c，記錄的歷史記錄中a、b、c都存在，而replaceState則不同）、replaceState（點擊頁面順序：a->b->c，記錄的歷史記錄中只有a->c，即用c代替了b記錄，b記錄被刪除了）切換路由的方式
// 對於pushState、replaceState需要通過函數重寫的方式進行劫持，也就是說我們重寫pushState和replaceState
// 但是我們一般都是pushState來跳轉鏈接，是通過this.$router.replace()來觸發；而pushState()是通過this.$router.push()來觸發
// 重寫pushState方法
const rawPushState = window.history.pushState
window.history.pushState = function (...args) {
rawPushState.apply(window.history, args)
console.log("終於監視到pushState了");
}
// 重寫replaceState方法
const rawReplaceState = window.history.replaceState
window.history.replaceState = function (...args) {
rawReplaceState.apply(window.history, args)
console.log("終於監視到replaceState了");
}
},
computed:{
},
methods:{
handerBack(){
// window.location.reload() //刷新
// window.history.go(1) //前進
// window.history.go(-1) //後退
// window.history.forward() //前進
// window.history.back() //後退+刷新
this.$router.replace('/home')
},
onhashchange(e){
console.log(e.oldURL,'about');
console.log(e.newURL);
console.log(location.hash);
},
onpopstate(e){
console.log(e,'popstate')
}
}
}
</script>
<style scoped>
</style>
hash和history的區別
hash模式的url後跟hash值#…，它的原理就是使用window.onHashChange來監聽hash值的改變，一旦發生變化就找出此hash值所匹配的組件，進而將組件渲染到頁面中。但是hash模式這種帶hash值的url是非常丑的，項目中也很少用hash模式。
history模式中的url是以/user這種格式，比較常見，它的原理是通過window.onpopstate來監聽路由變化，進而匹配不同的組件來渲染出來。
