2024年前端最全vue-router基础内容，阿里面试官态度

最后

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

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

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

HTML 和 CSS：

编程式路由

router.push(location, onComplete?, onAbort?)

该方法的参数location可以是一个字符串路径，或者一个描述地址的对象。用法如下：

router.push(‘b’);

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

router.push({path: ‘user/1’})

router.push({name: ‘user’, params: {id: 1}})

router.replace(location, onComplete?, onAbort?)

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

router.replace(…)

ps：你也可以在router-link使用replace。

router.go(n)

类似 window.history.go(n)。是history回退和前进的操作。

了解了上述几个点后，你基本上可以完成基本的路由功能了。

嵌套路由

---

一个组件内部也可以有路由视图router-view。

FatherComponent Content

于此同时需要在路由定义处添加children属性。也是类似嵌套的写法。

{

path: ‘/father’,

component: FatherComponent,

children: [

{ path: ‘child’, component: ChildComponent }

]

}

命名视图

---

当我们的布局是由几部分组成时，并且我们希望每一部分都有自己的路由，那么此时就不是嵌套路由了，而是多路由视图，这个时候我们就需要用到命名视图了。

而在定义路由的时候也要对应好。

const router = new VueRouter({

routes: [

{

path: ‘/’,

components: {

default: Foo,

a: Bar,

b: Baz

}

}

]

})

用watch监测路由

---

很多时候我们可能需要监测路由变化，那么需要在watch中监测’$route’，方法大体是’$route’ (to, from) {your code}

watch: {

‘$route’: function (to, from) {

this.fromRoute = from.path;

this.toRoute = to.path;

// 可以根据情况做一些后续的逻辑处理

…

}

}

路由重定向

---

重定向的意思就是本来是要跳路由A的，但是定向到B。写法如下：

routes: [

{ path: ‘/b’, component: ComponentB },

// redirect为path的形式

{ path: ‘/a’, redirect: ‘/b’ },

// redirect为name的形式

{ path: ‘/a’, redirect: { name: ‘compB’} },

// 甚至是一个方法，动态返回重定向目标，这样我感觉都可以做路由守卫了。

{ path: ‘/a’, redirect: to => {

// 方法接收 目标路由 作为参数

// return 重定向的 字符串路径/路径对象

}}

]

路由别名

---

routes: [

{ path: ‘/a’, component: A, alias: ‘/b’ }

]

alias的意思是别名，通俗讲，你大名是张三，别人叫你阿三，你也答应了，阿三就是你的别名。反映到路由上就是说，b是a的别名，那我输入路由b，地址栏会显示b，但也会映射到A组件；如果输入a，那地址栏就还是a，组件也是A，没什么变化。

向路由组件传递props

---

在组件中使用 $route 会使之与其对应路由形成高度耦合，我们可以使用props的形式来重新定义。这样id就会作为一个prop属性，用来接收传递的数据。

// 路由定义

routes: [

{ name:‘employee’, path: ‘/employee/:id’, component: Employee, props: true}

]

// 组件定义

const Employee = Vue.component(‘Employee’, {

props: [‘id’],

template: ‘

I am worker {{id}}

’

});

路由守卫

---

通过跳转或取消的方式守卫路由。

全局守卫

使用router.beforeEach注册全局的路由守卫：

router.beforeEach(function(to, from, next) {

console.log(‘GLOBAL_beforeEach’);

if (to.path === ‘/my’) {

next(false);

alert(‘You are not registered…’);

} else {

next();

}

});

next：一定要调用该方法来 resolve 这个钩子

• next(): 进行管道中的下一个钩子。

• next(false): 中断当前的导航。

• next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。也可以传params的。

路由独享的守卫

利用beforeEnter钩子实现。

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

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

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

前端面试题汇总

JavaScript