Web前端最新10(1)，2024年最新面试4个月被17家公司拒绝了

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

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

npm i vue-router@3…5.2 -S

2.2 创建路由模块

src源代码目录下，新建 router/index.js 路由模块，并初始化如下代码：

2.2.1 导入Vue 和 VueRouter 的 包

import Vue from ‘vue’

import VueRouter from ‘vue-router’

2.2.2 使用 Vue.use() 把vue-router安装为vue项目插件

Vue.use(VueRouter)

2.2.3 创建 VueRouter 的实例对象

const router = new VueRouter()

2.2.4 向外导出 router 实例对象

export default router

2.3 在main.js 文件中  导入并挂载路由模块

import router from ‘@/router/index.js’

new Vue({

render: h => h(App),

// 在vue项目中要想把路由用起来，必须要把路由实例对象，通过下面方式进行挂载

// router: 路由的实例对象

router

}).$mount(‘#app’)

2.4 声明路由链接和占位符

2.4.1 当安装和配置了vue-router后，就可以使用 router-link 来替代 a 链接

首页

电影

关于

---

2.4.2 只要在项目中安装和配置了vue-router，就可以使用 router-view 这个组件了。它的作用很单纯，就是 占位符。最终展示的组件要在这里展示

2.5 在路由模块 index.js 写入以下代码

const router = new VueRouter({

// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系

routes: [

// 路由规则

{path: ‘/home’, component: Home},

{path: ‘/movie’, component: Movie},

{path: ‘/about’, component: About}

]

})

---

五、什么是路由重定向？

路由重定向指的是：当用户访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。

通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

const router = new VueRouter({

// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系

routes: [

// 重定向路由规则

// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则

{path: ‘/’, redirect: ‘/home’},

// 路由规则

{path: ‘/home’, component: Home},

{path: ‘/movie’, component: Movie},

{path: ‘/about’, component: About}

]

})

---

六、路由嵌套

定义：通过路由实现组件的嵌套展示，叫做路由嵌套

1. 通过 children属性声明子路由规则

在src/router/index.js 路由模块中，导入需要的组件，并使用 children属性声明子路由规则

const router = new VueRouter({

// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系

routes: [

// 重定向路由规则

// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则

{path: ‘/’, redirect: ‘/home’},

// 路由规则

{path: ‘/home’, component: Home},

{path: ‘/movie’, component: Movie},

{path: ‘/about’, component: About, children: [

// 声明子路由规则

{path: ‘tab1’, component: Tab1},

{path: ‘tab2’, component: Tab2}

]}

]

})

2. 重定向子路由

const router = new VueRouter({

// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系

routes: [

// 重定向路由规则

// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则

{path: ‘/’, redirect: ‘/home’},

// 路由规则

{path: ‘/home’, component: Home},

{path: ‘/movie’, component: Movie},

{path: ‘/about’, component: About, redirect: ‘/about/tab1’, children: [

// 声明子路由规则

{path: ‘tab1’, component: Tab1},

{path: ‘tab2’, component: Tab2}

]}

]

})

3. 默认子路由

默认子路由，如果 children数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”

这个时候就不需要重定向子路由了，代码修改如下：

About 组件：

tab1组件

tab组件

index.js 路由模块：

const router = new VueRouter({

// routes 是一个数组，作用：定义Hash地址 与 组件 之间的对应关系

routes: [

// 重定向路由规则

// 当用户访问 / 的时候，通过redirect 属性跳转到 /home 对应的路由规则

{path: ‘/’, redirect: ‘/home’},

// 路由规则

{path: ‘/home’, component: Home},

{path: ‘/movie’, component: Movie},

{path: ‘/about’, component: About, children: [

// 默认子路由，如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做“默认子路由”，这个时候就不需要重定向了

// 声明子路由规则

{path: ‘’, component: Tab1},

{path: ‘tab2’, component: Tab2}

]}

]

})

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整