2024年最新vue路由详解版一目了然，2024年最新大数据高频面试题

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

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

资料截图 ：

高级前端工程师必备资料包

那么url地址和真实的资源之间就有一种对应的关系，就是路由。

路由分为前端路由和后端路由

1).后端路由是由服务器端进行实现，并完成资源的分发

后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由

2).前端路由是依靠hash值(锚链接)的变化进行实现

前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系

前端路由主要做的事情就是监听事件并分发执行事件处理函数

Vue Router

简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。

Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router

Vue Router的特性

支持H5历史模式或者hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

支持路由导航守卫

支持路由过渡动画特效

支持路由懒加载

支持路由滚动行为

Vue Router的使用步骤

1. 导入js文件

2. 添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址

User

3. 添加路由填充位（路由占位符）

4. 定义路由组件

var User = { template:“

This is User

” }

5. 配置路由规则并创建路由实例

var myRouter = new VueRouter({

//routes是路由规则数组

routes:[

//每一个路由规则都是一个对象，对象中至少包含path和component两个属性

//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象

{path:“/user”,component:User},

{path:“/login”,component:Login}

]

})

6. 将路由挂载到Vue实例中

new Vue({

el:“#app”,

//通过router属性挂载路由对象

router:myRouter

})

补充：

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

补充：

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

[外链图片转存中…(img-XRZKkD38-1715714250930)]