前言
随着单页面应用程序（SPA）的兴起，前端路由成为了现代 Web 开发中不可或缺的一部分。本文将详细介绍路由的基本概念、前端路由的实现方式，以及如何在 Vue.js 中使用 Vue Router 来管理路由。我们将通过具体的代码示例来帮助你更好地理解和掌握这些知识。
1.1 路由的概念
路由的本质就是一种 对应关系 ，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。
路由分为： 后端路由 和 前端路由
-
后端路由：由服务器端进行实现并实现资源映射分发
-
概念：根据不同的用户URL请求，返回不同的内容（地址与资源产生对应关系）
-
本质：URL请求地址与服务器资源之间的对应关系
Node _ ejs
用户地址栏输入 /user，匹配到服务器 user的路由，服务做相关的业务逻辑，通过 res.render()渲染了一个新的页面
-
-
前端路由：根据不同的事件来显示不同的页面内容，是事件与事件处理函数之间的对应关系
-
概念：根据不同的用户事件，显示不同的页面内容（地址与事件产生对应关系）
-
本质：用户事件与事件处理函数之间的对应关系
-
SPA(Single Page Application)单页面应用程序，基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。
1.2 前端路由实现
前端路由有2种模式：
-
hash模式
hash路由模式是这样的：http:///#/xx。 有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。
window.addEventListener('hashchange', ()=>{
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
});
-
history模式 （我们在创建创建项目的时候选择的就是这个）
HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。
history.pushState({},title,url); // 向历史记录中追加一条记录
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。
window.addEventListener('popstate', function(event) { console.log(event) })
注：浏览器地址没有#， 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下，不能手动刷新，否则返回404页面
hash 纯前端 操作，history需要后端的配合
hash路由体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<a href="#/a">a页面</a>
<a href="#/b">b页面</a>
<a href="#/c">c页面</a>
<a href="#/d">d页面</a>
<div id="router-view"></div>
</div>
</body>
<script>
const dom = document.getElementById('router-view')
// 监听hash值的变化
// 通过hash值的不同，模拟了不同的路由
window.addEventListener('hashchange', function () {
console.log(location.hash.slice(1))
render(location.hash.slice(1))
})
render('/a')
function render (urlHash) {
switch (urlHash) {
case '/a':
dom.innerHTML = '这里是a页面'
break;
case '/b':
dom.innerHTML = '这里是b页面'
break;
case '/c':
dom.innerHTML = '这里是c页面'
break;
case '/d':
dom.innerHTML = '这里是d页面'
break;
default:
dom.innerHTML = '这里是404页面'
break;
}
}
</script>
</html>
1.3 Vue Router
网址：Vue Router | Vue.js 的官方路由
1.3.1 介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
-
嵌套的路由/视图表
-
模块化的、基于组件的路由配置
-
路由参数、查询、通配符
-
基于 Vue.js 过渡系统的视图过渡效果
-
细粒度的导航控制
-
带有自动激活的 CSS class 的链接
-
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
-
自定义的滚动条行为
1.3.2 安装
如果在vue-cli创建项目时没有勾选上 vue-router 选项，此时就需要手动的来安装它（切记，要进入项目中再去运行这个指令），不过我们之前创建项目时已经安装上了，所以下面的命令时不需要的。
cnpm i vue-router -S
查看是否安装成功，查看文件 package.json的依赖文件中是否包含 vue-router选项
1.3.3 Vue Router基本使用
Vue Router的基本使用步骤：
-
引入相关库文件 （咱们使用脚手架创建，本身已经自带引入）
-
VueRouter引入到Vue类中 （咱们使用脚手架创建，本身已经自带引入， src/router/index.js）
-
定义路由组件规则（查看项目文件下的src/router文件夹，里面有index.js）
-
创建路由实例（查看项目文件下的src/router文件夹，里面有index.js）
-
把路由挂载到Vue根实例中（查看项目文件下的src/main.js）
-
添加路由组件渲染容器到对应组件中（占坑）（查看项目文件下的src/App.vue）
1.3.4 导航方式
在页面中，导航实现有2种方式：
-
声明式导航：通过点击链接实现的导航方式，例如HTML中的“a”标签，Vue中的“router-link”所实现的。
-
它就是先在页面中定义好跳转的路由规则，vueRouter中通过 router-link组件来完成
-
<router-link to="path">xxx</router-link>
<!--
to 要跳转到的路由规则 string|object
to="users"
:to="{path:'path'}"
-->
-
编程式导航：通过调用JavaScript形式API实现的导航方式，例如location.href实现的跳转效果
-
简单来说，编程式导航就是通过 JavaScript 来实现路由跳转
-
// App.vue
<template>
<div id="app">
<div id="nav">
<!-- 声明式跳转方式 ---- 标签跳转 -->
<!-- <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> -->
<!-- 编程式跳转 ---- js跳转方式 -->
<button @click="changePage('/')">Home</button> |
<button @click="changePage('/about')">About</button>
</div>
<router-view/>
</div>
</template>
<script>
export default {
methods: {
changePage (url) {
// 编程式跳转
// 路由其实可以看作是一个数组，数组的元素就是每一次操作的每一个路由
// push一次，相当于给数组的最后面添加了一个元素，指针指向新添加的最后一个元素
// replace一次，相当于替换了数组的最后一个元素，指针的位置并没有发生改变
// back一次，相当于删掉了最后一个元素（不是真的删除），指针指向了倒数第二个元素
// go一次，可以传入number类型的数字，值为正数，标签前进几步，值为负数，相当于后退几步
console.log(this.$router)
// this.$router.push()
// this.$router.replace()
// this.$router.back()
// this.$router.go()
this.$router.push(url)
// ？ 为什么可以直接在组件中通过this.$router 访问到路由的实例
// Vue.use(VueRouter) new Vue({ router }) 相当于实际上把router添加到了Vue的原型上
}
}
}
</script>
<style lang="stylus">
#app
font-family Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
text-align center
color #2c3e50
margin-top 60px
</style>
注意点：编程式导航在跳转到与当前地址一致的URL时会报错，但这个报错不影响功能：
如果患有强迫症，可以在路由入口文件 index.js 中添加如下代码解决该问题：
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
总结
通过本文的介绍，我们了解了路由的基本概念，包括后端路由和前端路由的区别。我们还深入探讨了前端路由的两种实现方式：hash 模式和 history 模式，并通过具体的代码示例展示了如何在 HTML 中实现简单的 hash 路由。
接着，我们介绍了 Vue Router，这是 Vue.js 官方提供的路由管理器。我们学习了如何安装 Vue Router，以及如何在 Vue 项目中配置和使用它。通过声明式和编程式的导航方式，我们可以轻松地在不同的页面之间进行切换，同时保持良好的用户体验。
