hash 模式 (默认)

• 工作原理: 监听网页的hash值变化 —> hashchange事件, 获取location.hash
• 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
• 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转
• 主要用在单页面应用(SPA)

  // 模拟原理
  
  // 监听页面hash值变化
  window.onhashchange = function(){
  	// 获取当前url的哈希值 
  	const _hash = location.hash
  	// 根据不同的哈希值显示不同的内容
  	switch(_hash) {
  	     case '/#a':
  	        document.querySelector('#app').innerHTML = '<h1>我是页面1内容</h1>'
  	        break;
  	     case '/#b':
  	        document.querySelector('#app').innerHTML = '<h1>我是页面2内容</h1>'
  	        break;
  	     case '/#c':
  	        document.querySelector('#app').innerHTML = '<h1>我是页面3内容</h1>'
  	        break;
  	} 
  }
  

history 模式

• 工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面.

• 其实一共有五种模式可以实现改变URL, 而不刷新页面.

  1. history.pushState()
  2. history.replaceState()
  3. history.go()
  4. history.back() --> 等价于 history.go(-1)
  5. history.forward() --> 等价于 history.go(1)

• 需要后台配置支持, 如果输入一个并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首页

• 开启history模式

  const router = new VueRouter({
    mode: 'history',
    routes: [...]
  })