前端技能树，面试复习第 47 天—— Vue-Router 详解

蟹蟹蟹风流

已于 2022-07-30 20:02:25 修改

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏：前端面试复习笔记文章标签：前端 vue.js Vue-router 路由面试

于 2022-07-30 20:01:51 首次发布

本文链接：https://blog.youkuaiyun.com/ImagineCode/article/details/126076854

前端面试复习笔记专栏收录该内容

60 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细探讨了Vue-Router的懒加载实现，对比了hash和history两种模式的特点及应用场景，并介绍了如何监听hash变化、理解route与router的区别。此外，还讲解了动态路由的定义、参数获取方法，以及路由钩子在组件生命周期中的作用。最后，文章讨论了Vue-router跳转与location.href的区别，params和query的使用区别，以及导航守卫的种类，强调了前端路由在单页面应用中的重要性。

1. Vue-Router 的懒加载如何实现

非懒加载：

import List from '@/components/list.vue'
const router = new VueRouter({
   
   
  routes: [
    {
   
    path

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蟹蟹蟹风流

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

【前端收藏】前端小作文-前端八股文知识总结（超万字超详细）持续更新

天天打码-16年老码农

02-04

2284

渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

呕心沥血60道Vue、Vue-Router、Vuex面试题及详解！

2401_89285701的博客

12-10

894

我们知道 vue 是通过构建数据驱动的web界面的渐进式框架所谓周期就是指从一个起点到一个终点的过程，那么生命周期就是指从生命开始到生命结束的过程vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。具体方法有：beforeCreate (创建前)created （创建后）beforeMount (挂载前)mounted (挂载后)beforeUpdate (数据更新前)

参与评论您还未登录，请先登录后发表或查看评论

前端路由、后端路由——想要学好vue-router 或者 node

2401_84097745的博客

04-15

875

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以领取。料的朋友点击这里可以领取。

前端面试知识自己的一些整理 ---持续更新中

lm_four的博客

04-17

3392

1.css和html css3 flex容器和item属性 transtion @media 栅格(col-Xs-12) 原理垂直水平居中三角形 position 清除浮动的方式（伪类） background属性兼容性 html5 * 2.JS 原生js 选择器节点操作闭包原型原型链定时执行延迟执行数组操作数组去重冒泡、快速 this作用域 bind(this)cal() ...

【coderwhy前端笔记 - 阶段六 VUE 】(整理版)（更新中2023.7.16）

hippyoo的博客

07-16

2414

本文以coderwhy前端系统课 - 阶段六VUE为主。一刷版本的笔记有些乱，目前还在二刷整理，同时参考了一部分其他的资料，并加上个人使用总结建议使用资源绑定里的html文件进行阅读资源说明

17张思维导图，2021年作为一名前端开发者需要掌握这些，前端面试复习资料参考大纲

cYang2030的博客

12-09

6296

本文首发于17张思维导图，最全前端复习资料总结，转载请联系作者前言 2020年最后一个月了，熬夜多天整理出17张思维导图，对前端面试复习知识点进行了最全的总结，分享给大家。每个知识点都尽量找到最好的文章来解释，通过思维导图的形式进行展示。给大家准备了高清的思维导图和食用更加方便的PDF文档，全部聚合思维导图一张，分类思维导图17张，涉及前端开发的方方面面面，JS基础，工程化，性能优化，安全，框架等。如果您是准备面试，或者享扩展前端知识，都可以通过这个目录进行学习。废话不多说，下面分类展开来说，收藏.

2024年最新前端面试题

热门推荐

Robergean的博客

03-04

4万+

持续更新中。。。。

前端面试题（HTML、JS、Vue、React、小程序）

weixin_43750611的博客

11-05

1万+

前端面试题HTML && CSSHTML1、Div 里面有个一个div *****2、doctype的作用 *3、link标签和import标签的区别 **HTML51、h5的新特性 ***CSS & CSS31、盒子模型 ****2、弹性布局、浮动布局、table布局 *****3、flex的属性 ****4、CSS3的新特性 *** （动画效果）5、CSS3选择器优先级及计算 ***6、清除浮动 ***7、position的相关属性 **JS原生*****

前端学习路线（来自鱼皮）——待填补学习

警警的博客

08-17

2609

相信自己有能力，那么你就真的会有！兴趣坚持付出心态总结一下，学前端的路线其实就一句话：基础三件套 => 巩固基础 => 学习框架 => 多做项目 => 按需学习 => 拓宽视野。还有一个学任何编程技术都要注意的点，全程多敲代码！多敲代码！多敲代码！

2022前端面试学习笔记

qq_41253612的博客

03-03

3643

1、MVVM和MVC的区别 MVVM，Model-View-ViewModel,即模型-视图-视图模型。【模型】指后端传递的数据，【视图】指所看到的的页面。【视图模型】是MVVM的核心，分为两个方向：1、【模型】->【视图】=》数据绑定 2、【视图】->【模型】=》DOM事件监听。两个方向都实现：双向绑定。 ...

2025前端面试核心知识点解析与源码详解

2025年前端面试题解析[源码]是一份全面且系统化的前端技术复习资料，旨在帮助开发者深入理解现代前端开发中的核心概念与关键技术点，并为应对日益竞争激烈的前端岗位面试做好充分准备。该文档不仅涵盖了HTML5、CSS3...

掌握前端面试技巧：必备知识点详解

不过，我可以根据标题和描述提供的主题——“前端面试之道”，以及标签“前端面试必备”来详细阐述前端面试中常见的知识点和重要概念。 ### 前端面试的知识点 #### HTML/CSS/JavaScript 基础在前端开发中，HTML...

前端面试核心知识点全解析（含可运行源码）

前端面试八股文是每一位准备进入或晋升于前端开发领域的工程师必须掌握的核心知识体系。该文档以“可运行源码”为特色，不仅系统性地梳理了前端技术栈中的关键知识点，还通过实际代码示例帮助开发者深入理解理论背后...

Java与Vue全栈面试题及答案详解

前端技术部分以**Vue为核心**，涵盖Vue 2与Vue 3的差异、响应式原理（Object.defineProperty vs Proxy）、虚拟DOM与Diff算法、组件通信方式（props/$emit、provide/inject、eventBus、Vuex/Pinia）、路由机制（Vue ...

Vue开发工具使用技巧

最新发布

2509_93946471的博客

11-24

280

打开DevTools的"Events"标签页，所有组件间传递的事件都会按时间顺序列出来，连事件负载数据都能展开看详情。更绝的是，你还能手动触发事件——比如在父组件里模拟一个事件，直接测试子组件的响应逻辑，省得反复修改代码来调试。如果组件用了作用域插槽，可以在"Scoped Slots"子面板里实时查看slot传递的数据内容，比在模板里写调试代码清爽得多。路由调试经常被忽略。热重载调试时，如果发现修改代码后页面没及时更新，可以到DevTools的"Settings"里勾选"Log reloads"选项。

Python全栈开发项目——AI智能聊天机器人

qiao_yue的博客

11-24

787

本项目实现了AI聊天功能，具有语音输入和聊天背景自定义等亮点功能

Vue3的生命周期

分享学习网络的点点滴滴

11-21

135

Vue3生命周期详解：从创建到卸载的全过程 Vue3的生命周期分为四个主要阶段：创建、更新、卸载和错误处理。创建阶段包含setup()、onBeforeMount()和onMounted()；更新阶段有onBeforeUpdate()和onUpdated()；卸载阶段包括onBeforeUnmount()和onUnmounted()。setup()替代了Vue2的初始化阶段，是组合式API的入口。子组件的生命周期会先于父组件执行。错误处理可使用onErrorCaptured()捕获和阻止错误传播。这些钩子函

Spring Boot 实战篇（四）：实现用户登录与注册功能

2509_94010201的博客

11-23

999

在构建 Web 应用程序时，用户登录与注册功能是常见且重要的部分。以下将详细介绍在 Spring Boot 项目中实现用户登录与注册功能的步骤，并附上相应的代码示例。

【前端】Grid布局实现瀑布流：随机生成数据、动态计算每项高度、无限滚动、异步请求更多

karshey的博客

11-21

996

本文介绍了使用CSS Grid布局实现瀑布流效果的方法。普通版通过设置grid-auto-rows:10px和动态计算gridRowEnd实现基础瀑布流布局。进阶版则通过随机生成颜色和高度数据，并实现无限滚动加载功能，模拟异步请求场景。核心思路是利用Grid布局的特性，动态计算每个项目在网格中的跨度，从而实现参差不齐的瀑布流排列效果。文中提供了完整的代码示例和实现原理说明。

Vue-router详解：组件导航与地址规则实战

Vue.js官方的路由插件vue-router是构建单页面应用的核心组件，它与Vue.js深度集成，负责管理和控制在应用程序中的路由和组件展示。在传统的网页应用中，页面间的切换主要依赖于超链接，而在单页面应用中，路由则扮演...