共计 6180 个字符，预计需要花费 16 分钟才能阅读完成。
1. 什么是前端路由
路由的概念来源于服务端，在服务端中路由形容的是 URL 与处理函数之间的映射关系。
在 web 前端单页面利用中，路由形容的是 URL 和 UI 之间的映射关系，这种映射关系是单向的，即 URL 变动引起 UI 更新。
2. 如何实现前端路由
要实现前端路由，须要解决两个外围：
- 如何扭转 URL 却不引起页面刷新
- 如何检测 URL 变动了
上面别离应用 hash 和 history 两种实现形式答复下面的两个外围问题。
2.1 通过 hash 实现
- hash 是 URL 中 #以及前面的那局部，罕用作锚点在页面内进行导航，扭转 URL 中的 hash 局部不会引起页面刷新。
- 通过 hashchange 监听 URL 的扭转。通过浏览器后退后退，通过 a 标签扭转，通过 window.location 扭转都会触发 hashchange 事件。
2.2 通过 history 实现
- history 提供了 pushState 和 popState 办法，这两个办法扭转 URL 的 path 局部不会引起页面刷新。
- history 提供 popState 事件，能够监听浏览器的后退后退事件。通过 pushState/replaceState 或者 a 标签扭转 URL 不会触发 popState 事件，好在咱们能够拦挡 pushState、replaceState、a 标签的点击事件来检测 URL 变动，所以监听 URL 变动能够实现，只是没有 hashChange 那么不便。
3. 原生 JS 版前端路由实现
下面说到基本上分为两种实现形式，别离通过 hash 和 history 实现。
3.1 基于 hash 实现
<body>
<ul>
<!-- 定义路由 -->
<li><a href="#/home">home</a></li>
<li><a href="#/about">about</a></li>
<!-- 渲染路由对应的 UI -->
<div id="routeView"></div>
</ul>
</body>// 页面加载，被动触发一次
window.addEventListener('DOMContentLoaded', onLoad)
window.addEventListener('hashchange', onHashChange)
var routerView = null
function onload() {routerView = document.querySelector('#routerView')
}
function onHashChange() {switch(location.hash) {
case '#/home':
routerView.innerHTML = 'HOME'
return
case '#/about':
routerView.innterHTML = 'About'
return
default:
return
}
}3.2 基于 history 实现
<body>
<ul>
<li><a href='/home'>home</a></li>
<li><a href='/about'>about</a></li>
<div id="routeView"></div>
</ul>
</body>window.addEventListener('DOMContentLoaded', onLoad)
window.addEvenetListener('popState', onPopState)
var routerView = null
function onLoad() {routerView = document.querySelector('#routerView')
onPopState()
// 拦挡 a 标签
var linkList = document.querySelectorAll('a[href]')
linkList.forEach(el => {el.addEventListener('click', function(e){e.preventDefault()
history.pushState(null, '', el.getAttribute('href')
onPopState()})
})
}
function onPopState() {switch(location.pathname) {
case '/home':
routerView.innterHTML = 'HOME'
return
case '/about':
routerView.innerHTML = 'about'
return
default:
return
}
}4. React 版前端路由实现
4.1 基于 hash 实现
<BrowserRouter>
<ul>
<li>
<Link to="/home">home</Link>
</li>
<li>
<Link to="/about">about</Link>
</li>
</ul>
<Route path="/home" render={() => <h2>Home</h2>} />
<Route path="/about" render={() => <h2>About</h2>} />
</BrowserRouter>BrowerRouter 实现：
export deafult class BrowerRouter extends React.Component {
state = {currentPath: util.extractHashPath(window.location.href)
}
onHashChange = (e) => {const currentPath = util.extrachHashPath(e.newURL)
this.setState({currentPath})
}
componentDidMount() {window.addEventListener('hashChange', this.onHashChange)
}
componentWillUnmount() {window.removeEventListner('hashChange',this.onHashChange)
}
render() {
return (<RouteContext.Provider value={{currentPath: this.state.currentPath}}>
{this.props.children}
</RouteContext.Provider>
)
}
}Route 实现
export default ({path, render}) => {
<RouteContext.Consumer>
{{(currentPath) => currentPath === path && render()}}
</RouteContext.Consumer>
}
Link 实现
export default ({to, ...props}) => <a {...props} href={"#" + to} />;4.2 基于 history 实现
export default class HistoryRouter extends React.Component {
state = {currentPath: utils.extractUrlPath(window.location.href)
}
onPopState = (e) => {const currentPath = utils.extractUrlPath(window.location.href)
this.setState({currentPath})
}
componentDidMont() {window.addEventListener('popState', this.onPopState)
}
componentWillUnmount() {window.removeEventListener('popstate', this.onPopState)
}
render() {
return (<RouteContext.Provider value={{currentPath: this.state.currentPath, onPopState: this.onPopState}}>
{this.props.children}
</RouteContext.Provider>
);
}
}Route 的实现
export default ({path, render}) => (
<RouteContext.Consumer>
{({currentPath}) => {currentPath === path && render()}}
</RouteContext.Consumer>
)Link 实现
export default ({to, ...props}) => {
<RouteContext.Consumer>
{({onPopState}) => (<a href="" {...props} onClick={
e=> {e.preventDefault()
window.history.pushState(null, "", to)
onPopState()}
}>
)}
</RouteContext.Consumer>
}5. Vue 版本前端路由实现
5.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>'}
}
const app = new Vue({
el: '',
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>5.2 基 history 实现
<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>小结
以上大部分内容和原文差不多，次要是记录集体学习的一个过程，全程基本上本人手打，加深印象。共勉~
正文完
发表至： vue-router
2020-08-04
