2024年最新10(2)，三年老前端经验面经

最新推荐文章于 2024-06-05 13:16:42 发布

2401_84616533

最新推荐文章于 2024-06-05 13:16:42 发布

阅读量665

点赞数 29

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616533/article/details/138870110

版权

程序员专栏收录该内容

106 篇文章 0 订阅

订阅专栏

最后

推荐一些系统学习的途径和方法。

路线图

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

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

HTML 和 CSS：

html5知识

css基础知识

三、前端路由的工作方式？

四、vue-router 的基本用法

1. 什么是 vue-router

2. vue-router 安装和配置步骤

2.1 安装 vue-router 包

2.2 创建路由模块

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

2.4 声明路由链接和占位符

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

五、什么是路由重定向？

六、路由嵌套

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

一、什么是路由？

路由简单来说就是：对应关系

二、什么是前端路由？

前端路由：指的是就是Hash地址与组件之间的对应关系

三、前端路由的工作方式？

用户点击了页面上的路由链接
导致了URL地址栏中的Hash值发生了变化
前端路由监听到了Hash地址的变化
前端路由把当前Hash地址对应的组件渲染到浏览器中

四、vue-router 的基本用法

1. 什么是 vue-router

vue-router 是vue.js 官方 给出的 路由解决方案，只能结合vue项目进行使用，能够轻松的管理 SPA（单页面应用程序）项目中组件的切换。

2. vue-router 安装和配置步骤

2.1 安装 vue-router 包

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}