Vue 进阶系列丨实现简易VueRouter
Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
2013年7月28日，尤雨溪第一次在 GItHub 上为 Vue.js 提交代码；2015年10月26日，Vue.js 1.0.0版本发布；2016年10月1日，Vue.js 2.0发布。
最早的 Vue.js 只做视图层，没有路由， 没有状态管理，也没有官方的构建工具，只有一个库，放到网页里就可以直接用了。
后来，Vue.js 慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（Vue-cli）等。此时，Vue.js 的定位是：The Progressive Framework。翻译成中文，就是渐进式框架。
Vue.js2.0 引入了很多特性，比如虚拟 DOM，支持 JSX 和 TypeScript，支持流式服务端渲染，提供了跨平台的能力等。Vue.js 在国内的用户有阿里巴巴、百度、腾讯、新浪、网易、滴滴出行、360、美团等等。
Vue 已是一名前端工程师必备的技能，现在就让我们开始深入学习 Vue.js 内部的核心技术原理吧！
与传统后端路由的区别
传统路由通常指的是基于后端服务器的路由管理方式，通过在服务器端配置路由规则，来实现不同 URL 地址对应的页面渲染。相比而言，像vueRouter这样的前端路由，他是通过 Vue.js 的组件系统来管理不同页面的渲染和切换。就是说，页面并没有跳转，还是这一个页面，只不过显示的是不同的组件而已。
vueRouter的两种模式
vueRouter有两种模式，一种是hash模式，一种是history模式。二者的区别如下：
1. Hash 模式：
a. URL 中会以 # 符号分割，例如：http://example.com/#/page
b. 通过监听浏览器的 hashchange 事件来实现页面的路由切换。
c. 不会向服务器发送请求，所有路由的切换都在客户端进行。
d. 兼容性好，支持在所有浏览器上正常运行。
2. History 模式：
a. URL 不会带有 # 符号，例如：http://example.com/page
b. 依赖 HTML5 的 History API 来实现页面的路由切换。
c. 使用 history.pushState 或 history.replaceState 方法来改变 URL，但这不会向服务器发送请求。
d. 在支持 HTML5 History API 的现代浏览器中可以实现，不支持该 API 的浏览器会自动回退到 hash 模式。
e. 需要后端服务器的支持，即服务器需要配置将所有的路由指向同一个 HTML 文件，以便在刷新页面时正确地加载应用程序的页面。
f. 主要的区别在于 URL 的表现形式以及对浏览器历史记录的处理方式。一般来说，如果不需要考虑兼容性，使用 History 模式会更加友好，因为它提供了更加清晰、美观的 URL 结构，而且不会在 URL 中带有 # 符号。但是需要注意的是，在使用 History 模式时，需要确保服务器端对于任何路径都返回同一个 HTML 文件，以避免在刷新页面时出现 404 错误。
这里给出如果你使用的是 history 模式，那么你的 nginx 配置需要改下：
location / {
root /nginx/html;
# 在路径匹配不上的情况下，将其指向index.html文件
# 具体的路由匹配由vue-router接管。
try_files $uri $uri/ /index.html;
}实现简易版hash模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueRouter-Hash模式</title>
</head>
<body>
<div>
<!-- 相当于 router-link -->
<a href="#/">首页</a>
<a href="#/mine">我的</a>
<a href="#/shop">商场</a>
</div>
<!-- 相当于 router-view -->
<div id="app"></div>
<script>
var router = {
// 定义路由表
routes:{},
// 定义路由规则
route(path, callback){
this.routes[path] = callback
},
init(){
window.onhashchange = ()=>{
var hash = location.hash.replace('#', '')
// 根据hash，获取 this.routes 中的对应内容
this.routes[hash] && this.routes[hash]()
}
}
}
router.init()
// 模拟用户使用
var view = document.getElementById('app')
router.route('/', ()=>{
view.innerHTML = '首页'
})
router.route('/mine', ()=>{
view.innerHTML = '我的'
})
router.route('/shop', ()=>{
view.innerHTML = '商场'
})
</script>
</body>
</html>
实现简易版history模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueRouter-History模式</title>
</head>
<body>
<div>
<!-- 相当于 router-link -->
<a href="/">首页</a>
<a href="/mine">我的</a>
<a href="/shop">商场</a>
</div>
<!-- 相当于 router-view -->
<div id="app"></div>
<script>
// 实现history风格的路由功能
var router = {
routes:{},
route(path, callback){
this.routes[path] = callback
},
// 路由切换
go(path){
// url更改
history.pushState({
path
}, null, path)
// 触发回调
this.routes[path] && this.routes[path]()
},
init(){
// 监听浏览器的前进后退
window.addEventListener('popstate',(e)=>{
var path = e.state ? e.state.path : '/'
this.routes[path] && this.routes[path]()
})
}
}
router.init()
var links = document.querySelectorAll('a')
links.forEach(item=>{
item.addEventListener('click', function(e){
router.go(this.getAttribute('href'))
e.preventDefault()
})
})
// 模拟用户使用
var view = document.getElementById('app')
router.route('/', ()=>{
view.innerHTML = '首页'
})
router.route('/mine', ()=>{
view.innerHTML = '我的'
})
router.route('/shop', ()=>{
view.innerHTML = '商场'
})
</script>
</body>
</html>
Vue 进阶系列教程将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！
叶阳辉
HFun 前端攻城狮
往期精彩：
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
27
0- 0
已为社区贡献1条内容
所有评论(0)