Vue基础知识（Web开发技术）（四）—路由

北半球的彼得兔

已于 2022-05-04 16:06:26 修改

阅读量1.4k

点赞数 3

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2022-01-04 17:23:08 首次发布

本文链接：https://blog.csdn.net/m0_48788975/article/details/122262804

版权

这章非常重要哈，编程编程编程。随缘上代码

导读：

本章重点

了解vue-router的实现原理
熟练路由的安装与使用
掌握路由对象的常用属性和动态路由的匹配及路由嵌套的方法
掌握命名路由、命名视图和编程式导航及query、params传参方式的方法

1.初识路由

路由：决定数据包从源地址到目的地址的路径；

转发：将源地址的数据转送到目的地址。

关键技术：路由表（映射表），决定数据包的指向。

Vue中的路由，用不同的URL对应不同的内容。

01什么是后端路由

例如：早期的网站开发，HTML页面由服务器直接渲染。

一个网站，那么多页面服务器如何处理呢？每个页面有自己对应的网址（URL）

工作原理：

后端路由通过用户请求的URL分发到具体的处理程序，浏览器每次跳转到不同的URL，都会重新访问服务器。服务器收到请求后，将数据和模板组合，返回HTML页面，或者直接返回HTML模板，由前端JavaScript程序再去请求数据，使用前端模板和数据进行组合，生成最终的HTML页面。（这个过程中会有一定的网络延迟）

优点：

渲染好的页面，不需要单独加载任何的JS和CSS，可以直接交给浏览器展示，有利于SEO（搜索引擎优化）

缺点：

对开发人员要求较高，需要同时具备前后端能力；
HTML代码和数据，以及对应的逻辑会混在一起，编写和维护都较复杂。

02什么是前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做。核心是改变URL，但是页面不进行整体的刷新。

例如：单页面富应用（SPA），就是在前后端分离的基础上加了一层前端路由实现的。

工作原理：

前端路由在访问一个新页面的时候仅仅是变换了一下hash值而已，没有和服务端交互，所以不存在网络延迟，提升了用户体验。

2.Vue-router

目前前端流行的三大框架, 都有自己的路由实现:

Angular的ngRouter
React的ReactRouter
Vue的vue-router

vue-router是Vue官方推出的路由管理器，和vue.js是深度集成的，适合用于构建单页面应用（https://router.vuejs.org/zh/）。

其主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更简单。

01vue-router工作原理简介

vue-router基于路由和组件：路由用于设定访问路径，将路径和组件映射起来。

在vue-router的单页面应用中, 页面的路径的改变就是组件的切换。

根据mode参数，单页面前端路由有两种实现方式：

hash模式；
history模式。

02vue-router工作原理：hash模式和history模式

1.hash模式

vue-router默认为hash模式。

hash模式使用URL的hash来模拟一个完整的URL，根据hash值的不同，渲染指定DOM位置的不同数据。

#就是hash符号（哈希符或者锚点），在hash符号后的值，称为hash值。

利用window可以监听onhashchange事件来实现hash模式。

hash值是用来指导浏览器动作的，对服务器没有影响；
HTTP请求中不包括hash值；
每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。

2.history模式

history模式不会出现#号，比较美观。

利用history.pushState()来完成URL的跳转，而且无须重新加载页面。使用history模式时，需要在路由规则配置中增加mode:'history'。

#示例代码
// main.js文件
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

HTML5中history有两个新增的API，分别是history.pushState() 和 history.replaceState()，它们都接收3个参数，即状态对象（state object）、标题（title）和地址（URL）。

03vue-router使用案例

下载并引入vue.js和vue-router.js文件

需要从官方网站获取vue.js和vue-router.js文件，保存到文件目录中。其次创建html文件，并在文件中引入这两个文件，示例代码如下。

<script src="vue.js"></script>
<script src="vue-router.js"></script>

注意引入顺序：在引入vue-router.js之前，必须先引入vue.js，因为vue-router需要在全局Vue的实例上挂载vue-router相关的属性。

编写HTML结构代码

<div id="app">
  <router-link to="/login" tag="span">前往登录</router-link>
  <router-view></router-view>
</div>

编写JavaScript结构代码

var login = { // 创建组件
  template: '<h1>登录组件</h1>'
}
var routerObj = new VueRouter({[ // 配置路由匹配规则
  routes: {path: '/login', component: login} ]
})
var vm = new Vue({
  el: '#app',
  router: routerObj // 将路由规则对象注册到vm实例上
})
<