1.History和Hash模式有何区别?

94 阅读1分钟

vue-router的模式

  • vue-router有三个模式 ,其中两个更为常用,那便是history和hash。两者的区别主要在url的显示形式上和部署配置上]

hash模式和history模式

hash模式在地址栏显示的时候是已哈希的形式:#/xxx,这种方式使用和部署都比较简单; history模式url看起来更优雅美观,但是应用在部署时需要做特殊配置,web服务器需要做回退处理,否则会出现刷新页面404的问题。

vue-router4.x中设置模式已经变化:

const router =createRouter({
history: createWebHashHistory(),// hash模式
history: createWebHistory(),// history模式
history: createMemoryHistory()// memory模式
})

用起来一模一样

<router-link to="/about">Go to About</router-link>

区别只在url形式

hash: http://xx.com/#/about
history:http://xx.com/about

history模式配置

server {
listen 80;
server_name xxx.com;
  location /admin{
    root /Users/ac/ww/admin;
    index index.html;
    try files $uri $uri/ /admin/index.html; //$uri 找文件 $uri/找地址 如果这两种都找不到的话,就会回退到/admin/index.html
  }
}