2024年Web前端最全vue-router 笔记(1)，2024年最新Web前端工程师的面试题

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

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

默认值: ‘click’

声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

Router 构建选项

---

routes

declare type RouteConfig = {

path: string;

component?: Component;

name?: string; // 命名路由

components?: { [name: string]: Component }; // 命名视图组件

redirect?: string | Location | Function;

props?: boolean | Object | Function;

alias?: string | Array;

children?: Array; // 嵌套路由

beforeEnter?: (to: Route, from: Route, next: Function) => void;

meta?: any;

// 2.6.0+

caseSensitive?: boolean; // 匹配规则是否大小写敏感？(默认值：false)

pathToRegexpOptions?: Object; // 编译正则的选项

}

mode

• 类型: string

• 默认值: "hash" (浏览器环境) | "abstract" (Node.js 环境)

• 可选值: "hash" | "history" | "abstract"

配置路由模式:

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。

• history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。

• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

base

• 类型: string

• 默认值: "/"

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

scrollBehavior

• 类型: Function

type PositionDescriptor =

{ x: number, y: number } |

{ selector: string } |

?{}

type scrollBehaviorHandler = (

to: Route,

from: Route,

savedPosition?: { x: number, y: number }

) => PositionDescriptor | Promise

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({

routes: […],

scrollBehavior (to, from, savedPosition) {

// return 期望滚动到哪个的位置

}

})

举例：

scrollBehavior (to, from, savedPosition) {

return { x: 0, y: 0 }

}

动态路由匹配

const router = new VueRouter({

routes: [

// 动态路径参数 以冒号开头

{ path: ‘/user/:id’, component: User }

]

})

像 /user/foo 和 /user/bar 都将映射到相同的路由。

参数值会被设置到 this.$route.params，可以在每个组件内使用

User {{ $route.params.id }}

响应路由参数的变化

想对路由参数的变化作出响应的话，你可以简单地 watch

watch: {

‘$route’ (to, from) {

// 对路由变化作出响应…

}

}

捕获所有路由或 404 Not found 路由

{

// 会匹配所有路径

path: ‘*’

}

{

// 会匹配以 /user- 开头的任意路径

path: ‘/user-*’

}

当使用_通配符_路由时，请确保路由的顺序是正确的，也就是说含有_通配符_的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。

路由对象属性

• $route.path

• 类型: string

字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

• $route.params

• 类型: Object

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

• $route.query

• 类型: Object

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

• $route.hash

• 类型: string

当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

• $route.fullPath

• 类型: string

完成解析后的 URL，包含查询参数和 hash 的完整路径。

• $route.matched

• 类型: Array<RouteRecord>

一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

编程式的导航

router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

// 字符串

router.push(‘home’)

// 对象

router.push({ path: ‘home’ })

// 命名的路由

router.push({ name: ‘user’, params: { userId: ‘123’ }})

// 带查询参数，变成 /register?plan=private

router.push({ path: ‘register’, query: { plan: ‘private’ }})

router.replace(…)

router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

---

意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()

router.go(1)

// 后退一步记录，等同于 history.back()

router.go(-1)

// 前进 3 步记录

router.go(3)

// 如果 history 记录不够用，那就默默地失败呗

router.go(-100)

router.go(100)

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示

你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口

const router = new VueRouter({

routes: [

{

path: ‘/’,

components: {

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

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

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。