Vue学习笔记 - 前端路由的实现思路

218 阅读2分钟

路由

路由:用于分发请求。

前端路由:根据用户的不同访问目标展示相应的视图。

实现方法:通过URL确定相应的div。

hash模式路由实现思路

从 hash(锚点)得到 div 的地址,从而确定 div。点击 a 标签,改变 hash。

window.location.hash可获取当前的 hash 值(以#开头)

监听hash变化事件hashchange,当hash变化时,展示相应的div。

相关概念

1、默认路由

默认情况下URL没有hash,此时取一个默认hash。

2、404路由/保底路由

若用户访问了不存在的hash,则取一个错误值, 展示错误界面。

3、路由表

用一个对象表示 hash 和 div 的对应关系

const routerTable = {
    '1': div1,
    '2': div2,
    '3': div3,
    '4': div4
}

4、子路由/嵌套路由

同一个 div 中又有很多个不同的子 div,实现方法较复杂,略。

hash/history/memory 模式区别

1、hash模式

任何情况下都可以用hash模式做路由。

【缺点】:SEO不友好,因为服务器收不到 hash

2、history 模式

如果后端将所有前端路由都渲染到同一个HTML(即无论URL最后的路径如何,都能定向到同一个HTML),则可以用 history 模式做路由。

【缺点】:IE 8 不支持

实现方法

从路径得到 div 的地址,从而确定 div。点击 a 标签,改变路径。

window.location.pathname可以获取当前的路径(以/开头)。

【问题】:

每次点击 a 标签,页面会刷新(因路径变了,会重新发起请求)。

【解决】:

浏览器提供了 history API,可以在不刷新页面的情况下改变URL。

首先阻止a标签的默认点击动作(阻止刷新),然后用window.history.pushState改变URL(此时不会刷新页面),再执行路由。

3、memory 模式

从 Local Storage 得到 div 的地址,从而确定 div。点击 a 标签,改变 Local Storage。不常用。

示例