文章插图
前端路由应用其实 history 和 hash 都是浏览器自有的特性 ， 单页面路由只是利用了这些特性 。 在不跳出当前 document 的情况下 ， 除了 history 自身的兼容性之外 ， 各个浏览器都不会存在差异 ， 而单页面开发就是在一个 document 中完成所有的交互 ， 这两者的完美结合 ， 将前端开发提升到了一个新的高度 。
vue-router 和 react-router 是现在最流行的路由状态管理工具 。 两者实现原理虽然是一致的 ， 但由于所依赖的技术栈不同 ， 使用方式也略有不同 。 在 react 技术栈开发时 ， 大部分的童鞋还是喜欢使用 react-router-dom， 它基于 react-router ， 加入了在浏览器运行环境下的一些功能 。
注入方式1. vue-routervue-router 可以在 vue 项目中全局使用 ，vue.use() 功不可没 。 通过 vue.use()， 向 VueRouter 对象注入了 Vue 实例 ， 也就是根组件 。 根组件将 VueRouter 实例一层一层的向下传递 ， 让每个渲染的子组件拥有路由功能 。
import VueRouter from 'vue-router'const routes = [{ path: '/',name: 'home',component: Home,meta:{title:'首页'} }]const router = new myRouter({mode:'history',routes})Vue.use(VueRouter)2. react-router-domreact-router 的注入方式是在组件树顶层放一个 Router 组件 ， 然后在组件树中散落着很多 Route 组件 ， 顶层的 Router 组件负责分析监听 URL 的变化 ， 在其下面的 Route 组件渲染对应的组件 。 在完整的单页面项目中 ， 使用 Router 组件将根组件包裹 ， 就能完成保证正常的路由跳转 。
import { BrowserRouter as Router, Route } from 'react-router-dom';class App extends Component {render() {return ()}}基础组件1. vue-router 提供的组件主要有 和

• 可以操作 DOM 直接进行跳转 ， 定义点击后导航到哪个路径下；对应的组件内容渲染到 中 。

、、

• 、 组件看名字就知道 ， 用于区分路由模式 ， 并且保证 React 项目具有页面跳转能力 。
• 组件与 vue-router 中的 组件类似 ， 定义点击后的目标导航路径 ， 对应的组件内容通过 进行渲染 。
• 用来将 react-router 由包容性路由转换为排他性路由 ， 每次只要匹配成功就不会继续向下匹配 。 vue-router 属于排他性路由 。

路由模式1. vue-router 主要分为 hash 和 history 两种模式 。 在 new VueRouter() 时 ， 通过配置路由选项 mode 实现 。

• Hash 模式：地址栏 URL 中有 # 。 vue-router 优先判断浏览器是否支持 pushState ， 若支持 ， 则通过 pushState 改变 hash 值 ， 进行目标路由匹配 ， 渲染组件 ， popstate 监听浏览器操作 ， 完成导航功能 ， 若不支持 ， 使用 location.hash 设置 hash 值 ， hashchange 监听 URL 变化完成路由导航 。
• History 模式：地址栏 URL 中没有 # 。 与 Hash 模式实现导航的思路是一样的 。 不同的是 ， vue-router 提供了 fallback 配置 ， 当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式 。 默认值为 true 。 网上资料对 Hash 路由模式的原理分析大都是通过 location.hash 结合 hashchange 实现 ， 与上述描述的 hash 路由模式的实现方式不同 ， 这也是小编最近阅读 vue-router 源码发现的 ， 鼓励小伙伴们读一下 ， 肯定会收获满满！

2. react-router-dom 常用的 2 种模式是 browserHistory、hashHistory ， 直接用或将根组件（通常是）包裹起来就能实现 。

• react-router 的实现依赖 history.js ， history.js 是 JavaScript 库 。、分别基于 history.js 的 BrowserHistory 类、HashHistory 类实现 。
• BrowserHistory 类通过 pushState、replaceState 和 popstate 实现 ， 但并没有类似 vue-router 的兼容处理 。 HashHistory 类则是直接通过 location.hash、location.replace 和 hashchange 实现 ， 没有优先使用 history 新特性的处理 。

嵌套路由与子路由1. vue-router 嵌套路由在 new VueRouter() 配置路由表时 ， 通过定义 Children 实现嵌套路由 ， 无论第几层的路由组件 ， 都会被渲染到父组件 标识的地方 。
router.js
const router = new Router({mode:'history',routes: [{path: '/nest',name: 'nest',component: Nest,children:[{path:'first',name:'first',component:NestFirst}]}]})nest.vue
一级路由 first.vue
二级路由 在 /nest 下设置了二级路由 /first， 二级对应的组件渲染在一级路由匹配的组件

• 上一页
• 1
• 2
• 3
• 4
• 5
• 6
• 下一页

稿源：(未知)

【傻大方】网址：http://www.shadafang.com/c/111J3025H020.html

标题：SPA 路由三部曲之核心原理( 五 )