Vue.js 前端路由详解：从基础概念到 Vue Router 实战

时间：02-13来源：作者：点击数：24

前言

随着单页面应用程序（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://xxx.abc.com/#/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)
}