2024年前端最新vue-router路由详解，读完我这份《前端开发核心源码精编解析》面试至少多要3K

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》

URL的hash和HTML5的history

前端路由的核心：改变url，但是页面不进行整体的刷新

• URL的hash

• URL的hash也就是锚点(#), 本质上是改变window.location的href属性.

• 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

• HTML5的history模式

• history.pushState（）实现

history.pushState({},‘’,‘home’)

• history.replaceState（）实现

由于是替换，所以，无法再浏览器中返回

• histoty.go(n)

• history.back（）：等价于history.go（-1）

• history.forward（）：等价于history.go（1）

认识vue-router

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

• Angular的ngRouter

• React的ReactRouter

• Vue的vue-router

• 当然, 我们的重点是vue-router

• vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

• 我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

• vue-router是基于路由和组件的

• 路由用于设定访问路径, 将路径和组件映射起来.

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

安装和使用vue-router

• 如果已经学习了webpack, 对这里就会比较熟悉.以下我们主要是通过工程化的方式进行开发的.

• 安装

• npm安装vue-router

npm install vue-router --save

• 在模块化工程中使用(因为vue-rooter是一个插件，所以可以通过Vue.use（）来安装路由功能)

• 第一步：导入路由对象，并调用Vue.use（VueRouter）

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

• 第二步：创建路由实例，并且传入路由映射配置

• 第三步：在Vue实例中挂载创建的路由实例

• 使用vue-router的步骤

• 第一步: 创建路由组件

• 第二步: 配置路由映射: 组件和路径映射关系

• 第三步: 使用路由: 通过<router-link>和<router-view>

效果：

路由的默认路径

• 我们这里还有一个不太好的实现:

• 默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.

• 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.

• 如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?

• 非常简单, 我们只需要配置多配置一个映射就可以了.

• 配置解析:

• 我们在routes中又配置了一个映射.

• path配置的是根路径: /

• redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

History模式

• 上面说过改变路径的方式有两种:

• URL的hash

• HTML5的history

• 默认情况下, 路径的改变使用的URL的hash.

• 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

router-link补充

• to：指定跳转的路径

• tag：指定router-link之后渲染成什么组件，如是渲染成 li 还是 a 标签

• active-class:当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

• 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.

• 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

修改方式

路由代码跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

比如, 我们将代码修改如下:

动态路由

路由懒加载

传送门

路由嵌套

概念

• 嵌套路由是一个很常见的功能

• 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.

• 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

• 路径和组件的关系如下:

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

前端面试题汇总

JavaScript

前端资料汇总