01、什么是前端路由？

前端路由的一个大背景就是当下流行的单页应用SPA，一些主流的前端框架，如vue、react、angular都属于SPA，那什么是SPA呢？

1.1、SPA

SPA（single-page application）单页面应用，就是浏览器只加载了一个URL地址，一个页面，应用的所有功能、交互都在这个页面内进行。而实现单页面应用的基础就是ajax，通过异步请求动态的切换页面内容、实现交互，页面整体没有刷新。这避免了页面URL跳转，用户体验也不会中断，就像原生应用一样，体验比较好。越来越多的系统在使用SPA，尤其是WebApp中使用广泛。

与SPA单页应用对应的就是多页应用MPA，当然两者不是非此即彼的，主要基于业务需求，是可以共存的。

SPA的主要表现就是更新视图而不重新请求页面，要实现前端的页面的自主路由控制，而不会刷新页面，涉及两种主流的技术：hash模式、history模式，这算是前端路由的核心原理，简单了解一下吧！

1.2、#hash路由原理

hash（ /hæʃ/ ）是URL地址中#号后面的内容（包括#），原本的作用是用于HTML页面内部定位的描点，描点的变化不会导致页面重新加载。HTTP请求中也不会带#，所以刷新也不影响，这是浏览器端的本地行为。

• 页面不刷新：hash的变化不会刷新页面，只会触发浏览器定位锚点，这是hash实现前端路由的基本原理。
• 获取 hash：window.location.hash
• hash 变更事件：window.hashchange监听hash变化。
• 不同的hash会进入浏览器历史记录。

http://www.xxx.cn/#/about
http://www.xxx.cn/#/pro-info-list

所以，实现过程就比较简单了！

❶ 监测hash变化：通过hashchange事件监测hash变化 。

❷ 加载资源：根据hash值匹配不同资源进行加载、切换，在Vue中切换的其实就是不同的组件。

🌰hash-简易路由示例：codepen

    

        
{{item.title}}
    
    

        
            
        
    

1.3、history路由原理

history 是历史对象，存放当前文档页面（或框架）的会话历史记录（不是浏览器的所有历史记录）。

pushState、replaceState 是HTML5在history上新增的API，用来新增、修改当前文档的历史记录，这两个API就是用来实现SPA单页应用前端路由的关键。他们的参数相同：(stateObj, title[, url])

• state：一个关联历史会话记录的状态对象，主要作用是在触发 popstate事件时作为参数传递，不需要可以为null，通过history.state可以获取到当前会话的state。
• title：新页面的标题，大部分浏览器都没有管他，可以空着。
• url：网址，可以相对、绝对地址，但不可跨域。这个url会更新到浏览器地址栏，但并不会加载该url地址，也不检查是否存在，页面也不会刷新！对，要的就是你不刷新。

基于这两个API的特性来实现前端路由。用 pushState还是 replaceState呢？两者作用一样的，唯一的不同就是pushState会产生历史记录，可用于前进、后退。

① 监测url地址变化，

• popstate 事件：当state变化时触发该事件，在事件中获取当前url地址。pushState、replaceState并不会触发popstate事件，前进、后退、跳转才会触发。
• 点击事件：绑定导航按钮的click事件，pushState()更新url。

② 加载资源：根据url值匹配不同资源进行加载、切换。

📢注意，页面第一次加载的时候，不会触发popstate事件。

history-简易路由示例：codepen

    

        

            {{item.title}}

    
    

        
            
        
    

📢 刷新页面时会重新加载当前（本地路由的）url地址，可能就404了，这就需要服务端支持，修改下nginx代理也是可以解决的。
❗history与hash的主要区别，就是不会出现一个#，看上去更加美观？好像也没啥区别吧！

02、开始vue-router

2.1、简介

Vue Router是Vue官方推出的路由组件，与Vue深度集成，支持hash、history两种模式。

• Vue2.* 版本 ▶ 对应 vue-router3.*版本，vue-router3.* 中文文档
• Vue3.* 版本 ▶ 对应 vue-router4.*版本，vue-router4.* 中文文档

2.2、安装使用

• 通过标签直接引用vue-router.js：

// 注册插件
Vue.use(VueRouter);

• 通过 vue-cli 脚手架搭建vue的开发框架，集成了vue-router组件。
• 注册插件：Vue.use(VueRouter)

03、vue-router3入门

3.1、Router选项

//创建路由器
let vrouter = new VueRouter({ routes: vroutes, mode: 'hash', base: '/vsystem/' });

interface RouteConfig = {
    path: string,
    component?: Component,
    name?: string, // 命名路由
    components?: { [name: string]: Component }, // 命名视图组件
    redirect?: string | Location | Function,
    props?: boolean | Object | Function,
    alias?: string | Array,
    children?: Array, // 嵌套路由
    beforeEnter?: (to: Route, from: Route, next: Function) => void,
    meta?: any,
    // 2.6.0+
    caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
    pathToRegexpOptions?: Object // 编译正则的选项
}
//$route路由对象
{
    name: "user-box", // 路由名称
    fullPath: "/user/21/vip?key=admin",
    hash: "", // 当前路由的哈希
    matched: [{… }],
    meta: {},
    params: { id: '21', type: 'vip' },
    path: "/user/21/vip",
    query: { key: 'admin' }
}

🌰简单的示例：

    {{r.name}}