當前位置:網站首頁>history和hash模式區別

history和hash模式區別

2022-05-13 08:30:17九九nine9

路由模式設置

修改路由在地址欄的模式
router/index.js中:

const router = new VueRouter({
    
  routes,
  mode: "history" // 打包上線後需要後臺支持
})

history和hash模式區別:

  1. 它們都實現頁面的跳轉功能(跳轉頁面)
  2. 它們的區別體現在3個方面:
    a.外觀 : history模式的path路徑不帶#號,hash有#號
    b.原理 : hash模式使用onhashchange , history使用pushState , 導致有兼容性差异。hash模式兼容性好(對瀏覽器的兼容性好,onhashchange) , history的兼容性比hash模式差一些 (底層使用的API是html5的API :pushState ,對瀏覽器有一定要求)
    c.項目上線後有區別。history開發的項目,在打包上線之後,需要後端配置來支持,不然就會出現404頁面。官網上有介紹
  3. 我在開發中,沒有特殊的要求,一般就用hash(默認值)。如果要修改模式,就改mode:“history”
  4. 為啥會有404頁面?
    a.history訪問這個地址時 , http://www.xxx.com/find , 後端收到的req.url 是/find , 但是我們是單頁面應用程序 , 我們只有一個資源是index.html ,沒有資源叫/find , 所以就會報404
    b.hash訪問這個地址時 , http://www.xxx.com/#/find , 後端收到的req.url 是/ , 有一個資源是index.html ,能正常顯示

版權聲明
本文為[九九nine9]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/133/202205130650189106.html

隨機推薦