如何去掉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 = "http://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 = "http://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來監聽路由變化，進而匹配不同的組件來渲染出來，

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502941.html

標籤：其他

上一篇：2022-8-26 jq簡單了解

下一篇：釣魚攻擊第一彈-釋放檔案

【面試題】如何去掉vue的url地址中的#號?及其原理？

如何去掉vue的url地址中的#號?及其原理？