2024年Web前端最新一文让你彻底搞懂 vue-Router(1)，轻松获得一线大厂面试offer

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

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

JavaScript

性能

linux

使用 vue-router 的前提是 vue 必须使用

在 router 文件夹内 index.js 引入vue-router

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter) //引用 vue-router 插件

2.2、配置路由

//配置路由与组件之间的关系

const route=[

{

path: ‘/’,

// 当访问 '/'的时候 路由重定向 到新的地址 ‘/home’

redirect: ‘/home’,

},

{

path: ‘/home’,

component: home,

},

{

path: ‘/login’,

component: login,

},

]

2.3、实例化

const router = new VueRouter({

mode: “history”, //设置模式

routes

});

2.4、挂载路由

到 main.js 中，vue 实例化中，把 router 挂载的 vue 上。

let app = new Vue({

el:‘#app’,

data:{},

// 挂载到vue上面

router,

})

2.5、页面上添加 router-link 和 router-view

首页

关于

router-link 默认会被渲染成 a 标签，如：

首页

// 渲染成

首页

router-view 是用来占位的，将路由对应的组件展示到该位置。

3、router 的模式

---

路由模式有两种，hash 和 history 模式。

3.1、hash 模式

vue-router 默认使用的是 hash 模式。

hash 的 url 中锚点就是 #xx 号后的内容，通过锚点作为路由地址，我们通常改变的是#号后的内容，实现浏览器渲染指定的组件，锚点发生改变会触发 onhashchange 事件。

3.2、history 模式

history就是正常的 url，没有#号，使用的时候需要服务器进行配置。history模式下，对应的方法与上述 5 个方法是一样的。

vue-router 中可以指定需要的模式：

const router = new VueRouter({

mode:‘history’

})

4、router-link的属性

---

router-link 默认会渲染成 a 标签，但是有时候你想渲染成别的标签也是可以的。

4.1、tag 属性

tag属性是用来设置 router-link 标签渲染类型的，如我们想把 router-link 渲染成 button，如：

首页

查看渲染后的元素，发现变成 button 标签了，对应的 to 添加的属性值就会失效。此时点击无法跳转到对应内容，可继续阅读下边跳转方式。

除了 button ，tag 的属性值还可以是其他任意标签，router-link 自动渲染成对应的标签。

4.2、replace 属性

replace与上边 history 模式中的 replaceState 对应，跳转的时候不会留下 history 记录，指定replace 的情况下，不能返回上一页。

首页

4.3、active-class

active-class 设置 router-link 点击当前选中的类名，默认情况下类名为：router-link-active

<a href=“#/”

aria-current=“page”

class=“router-link-exact-active router-link-active”>

首页

设置当前元素样式需要设置到：router-link-active。

设置 active-class ，如：

首页

// router-link-active 类名会被替换成 active

如果需要把全局的 router-link 的选择类名都修改成自定义的，一个一个单独设置工作量太大，可以在 router 中统一设置。

const router=new VueRouter({

routes,

mode: ‘hash’,

linkActiveClasss: ‘active’ //统一设置类名

})

5、vue-Rrouter 页面跳转方式

---

5.1、router-link 实现

// 简单写法

首页

//使用动态的path

可以使用path 也可以使用name

//带传参跳转1

<router-link :to="

{ name:‘home’, params:{ id:‘123’ , name:‘gq’ }}

">

//带传参跳转

<router-link :to="

{ path:‘/’, query:{ id:‘123’ , name:‘gq’ }}

">

5.2、通过 js 实现跳转

// 简单写法

this.$router.push({ path:‘/’ })

// push 与history.pushState 一样

//带参跳转

this.$router.push({

name: ‘home’ , params: { id:‘123’ , name:‘gq’ }

})

//带多种参数

this.$router.push({

name: ‘home’ ,

params: { id:‘123’ , name:‘gq’ },

query: { plan:‘private’ }

})

6、动态路由

---

在某些情况下，一个页面的 path 路径可能是不确定的，如：希望的路径为 /user/123或 /user/456 。后边的值为用户 id 或其他值。

配置路由

routers:[

{

path: ‘/user/:id’,

component:()=>{ import(‘…/views/user.vue’) }

}

]

添加路由

user:123

user:456

//动态设置后边id值

user:{{ id }}

获取后边动态值

this.$route.params.id

此处的 id 是配置路由处设置的 id ，只要保持一致就可以了

方式二：使用 query 进行传参

//取值时

this.$route.query.id

另外，this.$router.addRoutes([]) 也可以添加动态路由，里面传的是一个数组，与 routes 配置一样。

7、路由的懒加载

---

懒加载通俗的讲就是使用的时候再加载，不使用的时候不加载。

打包构建应用程序的时候，js包会变得很大，影响加载速度，如果我们能把不同路由对应的组件分割成不同的代码块，然后访问路由的时候才加载对应的组件，这样就更加高效了。

**路由懒加载到底做了什么呢？**主要作用就是将路由对应的组件打包成一个js代码块，只有路由访问的时候，才加载对应的 js 。

//直接引用的

import Home from ‘./component/home’

const routes = [

{

path:‘/home’,

component:Home

}

]

//懒加载

const routes = [

{

path:‘/home’,

component:()=>{ import(‘./component/home’) }

}

]

8、嵌套路由

---

实际应用中，通常由多层嵌套的组件组合而成。

实现步骤：

第一：创建对应的子组件，并且在路由映射中配置对应的子路由。

第二：组件内部使用 router-view 标签

{

path: “/body”,

component: ()=> import( “…/components/bodyLayout.vue”),

children:[

{

path: “manager”,

component: ()=> import( “…/components/blankView.vue”),

children:[

{

path: “user”,

component: ()=> import( “…/views/manager/user.vue”)

},

]

},

]

}

访问 user 组件时，路由为：/body/manager/user

注意：嵌套路由设置 path 时，不能添加 “/”，否则路由就变了。

{

path: “/user”,

component: ()=> import( “…/views/manager/user.vue”)

}

//此时访问路由就变成了 " /user "

9、router 与 route 区别

---

试着在main.js 打印 router 在任意组件内打印 this.$router，打印结果如图：

我们发现两个结果是一模一样的。这样我们就不难理解下面的意思了。

router 为 VueRouter 实例，拥有自己的方法，如：使用 new VueRouter创建的实例，想要导航到不同url，可以使用 router.push ，跳转方式中有介绍。

route 为当前活跃状态路由对象，有当前路由的信息，可以通过该对象，获取 path、params参数、query参数、name、matched、hash

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素