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

蟹蟹蟹风流

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

阅读量340

点赞数

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

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/ImagineCode/article/details/126076854

版权

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

60 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

非懒加载：

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

了解本专栏

超级会员免费看

蟹蟹蟹风流

博客等级

码龄10年

全栈领域优质创作者

博客专家认证

394
原创

1349
点赞

3099
收藏

3万+
粉丝

关注

私信

热门文章

分类专栏

展开全部收起

上一篇：: 前端技能树，面试复习第 46 天—— Vue 生命周期 | 父子组件钩子的执行顺序 | 组件间通信有哪些方式

下一篇：: 前端技能树，面试复习第 48 天—— Vuex 原理

最新评论

函数表达式与函数声明别搞混了
minminmia: 最后，函数声明？
是时候在 Java 中使用方法句柄和变量句柄了，它的效果比反射要好
CSDN-Ada助手: 推荐 Java 技能树：https://edu.csdn.net/skill/java?utm_source=AI_act_java
【Django】Python+Django 图文教程
星求: /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var c=[],d=a.document,e=c.slice,f=c.concat,g=c.push,h=c.indexOf,i={},j=i.toString,k=i.hasOwnProperty,l={},m="1.12.4",n=function(a,b){return new n.fn.init(a,b)},o=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,p=/^-ms-/,q=/-([\da-z])/gi,r=function(a,b){return b.toUpperCase()};n.fn=n.prototype={jquery:m,constructor:n,selector:"",length:0,toArray:function(){return e.call(this)},get:function(a){return null!=a?0>a?this[a+this.length]:this[a]:e.call(this)},pushStack:function(a){var b=n.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b},each:function(a){return n.each(this,a)},map:function(a){return this.pushStack(n.map(this,function(b,c){return a.ca
【Django】Python+Django 图文教程
All the way984: 麻烦楼主补一下model配置后修改views.py中的业务逻辑对接数据库这部分内容，图片丢失了
【Django】Python+Django 图文教程
yagaminaito: model配置后修改views.py中的业务逻辑对接数据库这部分怎么没说明了

大家在看

vs2022中scanf()函数的用法

最新文章

目录

展开全部

收起

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

蟹蟹蟹风流 期望和你分享一杯咖啡

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。