VueRouter（一）：前端路由

前端路由

什么是路由：路由就是 URL 跟 页面 的一一对应关系。

什么是前端路由：由前端来管理 URL 跟 页面 的对应关系。

在 SPA 中，路由指的是 URL 跟 组件 的对应关系。

路由的不同模式

前提：当 URL 发生改变时，浏览器就会向服务器发送请求，从而刷新页面。在单页面应用中，我们是通过改变 URL 的方式来切换展示的组件，这时候我们希望的是只进行组件的替换，而页面不需要进行刷新。这时我们就可以通过路由的 hash 模式 跟 history 模式来实现。

路由的 hash 模式

锚点定位

锚点的作用及用法

通过 a 标签的 href 属性能够跳转到 某个指定的页面。

如果使用 锚点 的话就能够跳转到 当前页面的指定位置，或者是 其他页面的指定位置。

1. 跳转到当前页面的指定位置

• 在 a 标签的 href 属性中使用 # 来实现锚点定位；

• 通过 id 的属性值来实现定位。

<!-- 通过 id 的值来实现锚点定位 -->
<a href="#content">跳转到 content 的位置 </a>

<div id="content">abc</div>

跳转前后的 url 对比：

可以看到，锚点定位就是在 URL 后面拼接上了 #content。

2. 跳转到其他页面的指定位置

<!-- 跳转到其他页面 -->
<a href="页面路径/index.html">跳转到其他页面</a>

<!-- 跳转到其他页面的指定位置 -->
<a href="页面路径/index.html#content">跳转到其他页面的指定位置</a>

路由的 hash 模式的实现

<a href="#/home">home</a>
<a href="#/about">about</a>

<div id="content">abc</div>

通过监听 hash 值的改变我们可以进行一些操作，例如修改内容：

const contentEl = document.querySelector('#content')

// 监听 hash 值的改变
window.addEventListener('hashchange', () => {
  // 通过 location.hash 获取到 hash 值
  switch (location.hash) {
    case '#/home':
      contentEl.innerHTML = 'home'
      break
    case '#/about':
      contentEl.innerHTML = 'about'
      break
  }
})

路由的 history 模式

history 对象是 HTML5 新增的对象，它可以用来改变 URL 但是不刷新页面。

history 模式的思路是：首先监听所有 a 标签的点击事件，阻止默认的改变地址跟资源请求的行为，然后通过 history 对象的方法，人为的去改变 URL 的路径。

<a href="/home">home</a>
<a href="/about">about</a>

<div class="content">abc</div>

const contentEl = document.querySelector('.content')

const as = document.getElementsByTagName('a')

const changeContent = () => {
  // 通过 location.pathname 获取到路径
  switch (location.pathname) {
    case '/home':
      contentEl.innerHTML = 'home'
      break
    case '/about':
      contentEl.innerHTML = 'about'
      break
    default:
      contentEl.innerHTML = 'default'
  }
}

for (let a of as) {
  // 监听所有 a 标签的点击
  a.addEventListener('click', (e) => {
    // 阻止默认的资源请求以及改变地址行为
    e.preventDefault()

    // 人为的进行地址的更改
    const href = a.getAttribute('href')
    history.pushState({}, '', href)
    // history.replaceState({}, '', href)
    
    // 前端操作
    changeContent()
  })
}

// 监听路径回退
window.addEventListener('popstate', changeContent)

这里相当于重写了 a 标签，就是我们阻止了 a 标签更改地址以及向服务器发送请求，然后手动改变了 URL 的路径。