vue中history和hash的区别和使用方法

  1. hash模式,带#号,不美观最好的坏处就是,例如比如生成二维码的时候会自动过滤掉#后面的参数,微信登录,已经分享的时候都会把#后面的参数或者路径都过滤掉,这样我们就很不方便了,导致一些Bug的产生,所以要用到history模式。
  2. history利用浏览器的history.pushState API来跳转无需加载页面,当使用history模式时,URL就是正常的URL,如http://www.weiyunquan.com/user/id,这样比较美观好看正常。不过这种模式需要服务端的配置支持,如Nginx配置
    location / {
      try_files $uri $uri/ /index.html;
    }

配置的意思就是如果找不到URL时,就直接404 ,前端的路由中也应该加一个404路由,如

//来自官网
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: NotFoundComponent }
  ]
})

来自自己的代码写法

const router = new VueRouter({
  mode: 'history',
  routes: [
       {
        path: '*',
        redirect: '/404'
    }
  ]
})
posted @ 2019-06-10 16:14  guanqinghua  阅读(80)  评论(0编辑  收藏  举报