2024年最全Vue学习4：Vue-router_vue router 4，2024年最新阿里面试 笔试题

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

Vue学习4：Vue-router

文章目录

• 一、认识路由
• • 1. 后端路由与前端路由
• 二、Vue-router基本使用
• • 1. 基本使用
    • 2. router-link的属性
    • 3. 动态路由
    • 4. 路由的懒加载
    • 5. 嵌套路由
    • 6. 参数传递
    • 7. 导航守卫
    • 8. keep-alive

一、认识路由

路由器提供了两种机制：路由和传送

• 路由是决定数据包从来源到目的地的路径
• 传送将输入端的数据转移到合适的输出端
• 路由内有一个路由表，决定了数据包的指向

1. 后端路由与前端路由

后端路由阶段


前后端分离阶段：每个url对应静态资源服务器中的一套html + css + js（url -> html + css + js）


SPA阶段：
引入前端路由概念，一开始就从静态服务器获得全部资源，当在页面操作时不同url会通过前端路由，查找对应的页面（url -> 页面/组件）


实现方式：

• 直接修改location.hash，也就是修改锚点，能够改变href，这时候会引发前端路由，找到合适的页面进行展示，不发生页面刷新（也就是不会向服务器发起请求）。location.hash='aaa'
• 通过history.pushState也可以改变url，页面不刷新。history.pushState({}, '', 'home')。同时这是一种对页面的压栈操作，可以通过history.back()或者history.go(-1)出栈一个页面，也就是返回上一层。同样有history.forward()和history.go(1)。
• 通过history.replaceState，页面不刷新。history.replaceState({}, '', 'home')。这个直接替换，没有返回操作。

二、Vue-router基本使用

1. 基本使用

• 安装：npm install vue-router --save
• 使用：①导入路由对象，并且调用Vue.use(VueRouter) ②创建路由实例，并且传入路由映射配置 ③在Vue实例中挂载创建的路由实例

router -> index.js：

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1. 导入路由对象，并且调用Vue.use(VueRouter) 
Vue.use(VueRouter)
//2. 创建路由实例，并且传入路由映射配置 
const router = new VueRouter({
  routes: []
})
//3. 在Vue实例中挂载创建的路由实例
export default router

在Vue实例中挂载

④创建一些组件，然后配置路由映射（之后使用懒加载）

⑤使用路由，在App.vue中
<router-link>是vue-router中的内置组件，会被渲染成一个<a>标签
<router-view>会根据当前的路径动态渲染出不同的组件，占位的

或者

效果：

注意，想要展示的是http://localhost:8081/homeurl的话，要在router里面加mode: 'history'。

2. router-link的属性

to：指定跳转的路径
tag：指定router-link渲染成什么标签
replace：使用replaceState，让返回按钮不起作用
active-class：修改active时对应的类名，默认为router-link-active
如<router-link to="/home" tag="button" replace active-class="active">首页</router-link>

3. 动态路由

结果：

注意区别：
$router是指路由对象
$route是指当前活跃的路由

4. 路由的懒加载

打包后的js文件：
app.js：业务代码，会随着项目的增大越来越大
manifest.js：底层支撑代码，把原来不同的js文件联系起来
vendor.js：第三方相关代码，如vue/vue-router/axios等

app.js的过大可能导致在显示页面时出现空白现象，所以，需要懒加载技术，用到时再加载。
最好是一个路由对应一个js文件，而不是一个app.js.
路由懒加载：将路由对应的组件打包成一个个小的js代码块，当这个路由被访问时，才加载

分享

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