什么是前端路由？
路由的概念来源于服务端，在服务端中路由描述的是URL处理函数之间的映射关系。
在web前端单页面应用SPA（single page application）中，路由描述的是URL与UI之间的映射关系，这种映射是单向的，即URL变化引起UI更新，不需要刷新页面。
如何实现路由？
要实现前端路由，首先解决两个核心问题：如何改变URL却不引起页面刷新？如何检测URL变化？
下面分别使用hash和history两种方法回答以上问题。
1、hash
hash是URL中hash（#）及后面那部分，成用作锚点在页面内进行导航，改变URL中的hash部分不会引起页面刷新。
通过hashchange事件监听URL变化，改变方式只有这几种：通过浏览器前进后退改变、通过标签改变、通过Windows.location改变，这几种情况都会触发hashchange事件。
HTML代码部分：
<body>
<ul>
<!-- 定义路由 -->
<li><a href="#/home">home</a></li>
<li><a href="#/about">about</a></li>
<!-- 渲染路由对应的 UI -->
<div id="routeView"></div>
</ul>
</body>
JavaScript代码部分：
// 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
window.addEventListener(‘DOMContentLoaded‘, onLoad)
// 监听路由变化
window.addEventListener(‘hashchange‘, onHashChange)
// 路由视图
var routerView = null
function onLoad () {
routerView = document.querySelector(‘#routeView‘)
onHashChange()
}
// 路由变化时，根据路由渲染对应 UI
function onHashChange () {
switch (location.hash) {
case ‘#/home‘:
routerView.innerHTML = ‘Home‘
return
case ‘#/about‘:
routerView.innerHTML = ‘About‘
return
default:
return
}
}
2、history
history 提供了 pushState 和 replaceState 两个方法，这两个方法改变 URL 的 path 部分不会引起页面刷新。
history 提供类似 hashchange 事件的 popstate 事件，但 popstate 事件有些不同：通过浏览器前进后退改变 URL 时会触发 popstate 事件，通过pushState/replaceState或标签改变 URL 不会触发 popstate 事件。
好在我们可以拦截 pushState/replaceState的调用和标签的点击事件来检测 URL 变化，所以监听 URL 变化可以实现，只是没有 hashchange 那么方便。
HTML代码部分：
<body>
<ul>
<li><a href=‘/home‘>home</a></li>
<li><a href=‘/about‘>about</a></li>
<div id="routeView"></div>
</ul>
</body>
JavaScript代码部分：
// 页面加载完不会触发 hashchange，这里主动触发一次 hashchange 事件
window.addEventListener(‘DOMContentLoaded‘, onLoad)
// 监听路由变化
window.addEventListener(‘popstate‘, onPopState)
// 路由视图
var routerView = null
function onLoad () {
routerView = document.querySelector(‘#routeView‘)
onPopState()
// 拦截 标签点击事件默认行为， 点击时使用 pushState 修改 URL并更新手动 UI，从而实现点击链接更新 URL 和 UI 的效果。
var linkList = document.querySelectorAll(‘a[href]‘)
linkList.forEach(el => el.addEventListener(‘click‘, function (e) {
e.preventDefault()
history.pushState(null, ‘‘, el.getAttribute(‘href‘))
onPopState()
}))
}
// 路由变化时，根据路由渲染对应 UI
function onPopState () {
switch (location.pathname) {
case ‘/home‘:
routerView.innerHTML = ‘Home‘
return
case ‘/about‘:
routerView.innerHTML = ‘About‘
return
default:
return
}
}
以上实现代码为使用原生JavaScript实现，下面介绍使用vue实现的代码。
1、hash
使用方式和 vue-router 类似（vue-router 通过插件机制注入路由，但是这样隐藏了实现细节，为了保持代码直观，这里没有使用 Vue 插件封装）：
<div>
<ul>
<li><router-link to="/home">home</router-link></li>
<li><router-link to="/about">about</router-link></li>
</ul>
<router-view></router-view>
</div>
const routes = {
‘/home‘: {
template: ‘<h2>Home</h2>‘
},
‘/about‘: {
template: ‘<h2>About</h2>‘
}
}
const app = new Vue({
el: ‘.vue.hash‘,
components: {
‘router-view‘: RouterView,
‘router-link‘: RouterLink
},
beforeCreate () {
this.$routes = routes
}
})
router-view 实现:
<template>
<component :is="routeView" />
</template>
<script>
import utils from ‘~/utils.js‘
export default {
data () {
return {
routeView: null
}
},
created () {
this.boundHashChange = this.onHashChange.bind(this)
},
beforeMount () {
window.addEventListener(‘hashchange‘, this.boundHashChange)
},
mounted () {
this.onHashChange()
},
beforeDestroy() {
window.removeEventListener(‘hashchange‘, this.boundHashChange)
},
methods: {
onHashChange () {
const path = utils.extractHashPath(window.location.href)
this.routeView = this.$root.$routes[path] || null
console.log(‘vue:hashchange:‘, path)
}
}
}
</script>
router-link 实现:
<template>
<a @click.prevent="onClick" href=‘‘><slot></slot></a>
</template>
<script>
export default {
props: {
to: String
},
methods: {
onClick () {
window.location.hash = ‘#‘ + this.to
}
}
}
</script>
2、history
使用方式和 vue-router 类似：
<div>
<ul>
<li><router-link to="/home">home</router-link></li>
<li><router-link to="/about">about</router-link></li>
</ul>
<router-view></router-view>
</div>
const routes = {
‘/home‘: {
template: ‘<h2>Home</h2>‘
},
‘/about‘: {
template: ‘<h2>About</h2>‘
}
}
const app = new Vue({
el: ‘.vue.history‘,
components: {
‘router-view‘: RouterView,
‘router-link‘: RouterLink
},
created () {
this.$routes = routes
this.boundPopState = this.onPopState.bind(this)
},
beforeMount () {
window.addEventListener(‘popstate‘, this.boundPopState)
},
beforeDestroy () {
window.removeEventListener(‘popstate‘, this.boundPopState)
},
methods: {
onPopState (...args) {
this.$emit(‘popstate‘, ...args)
}
}
})
router-view 实现：
<template>
<component :is="routeView" />
</template>
<script>
import utils from ‘~/utils.js‘
export default {
data () {
return {
routeView: null
}
},
created () {
this.boundPopState = this.onPopState.bind(this)
},
beforeMount () {
this.$root.$on(‘popstate‘, this.boundPopState)
},
beforeDestroy() {
this.$root.$off(‘popstate‘, this.boundPopState)
},
methods: {
onPopState (e) {
const path = utils.extractUrlPath(window.location.href)
this.routeView = this.$root.$routes[path] || null
console.log(‘[Vue] popstate:‘, path)
}
}
}
</script>
router-link 实现:
<template>
<a @click.prevent="onClick" href=‘‘><slot></slot></a>
</template>
<script>
export default {
props: {
to: String
},
methods: {
onClick () {
history.pushState(null, ‘‘, this.to)
this.$root.$emit(‘popstate‘)
}
}
}
</script>
原文：https://www.cnblogs.com/jiujiu-blog/p/13969695.html