Web前端最全vue路由全面详解（中）：路由命名、query参数、params参数，2024年最新面试教程视频讲解

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

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

}

b. 简化跳转：

在 .vue 文件中，编写以下跳转代码 ：

跳转

跳转

二、路由的参数

---

路由在跳转到目标路径时，我们可以指定路由携带一些参数进行跳转，我们主要使用的是 query 参数和 params 参数

1.query参数

a.在跳转的时候，指定要传递的参数的写法，有字符串和对象两种方法

**to的字符串写法：**在路径后，加上所要传的参数，表示传递的数据是 id=666,title=你好

**to的对象写法：**将path和query封装为一个对象，表示传递的数据是 id=666,title=你好

跳转

<router-link

:to="{

path:‘/home/message/detail’,

query:{

id:666,

title:‘你好’

}

}"

跳转

b.接收参数（拿到参数）的写法：

使用下面的方法：即可将路由传递的数据获取到，然后对数据进行其他操作

$route.query.参数名字

$route.query.id

$route.query.title

使用简化写法，也可以传递参数：只需要将路径 path ，换成 name 即可

<router-link

:to="{

name:‘hello’,

query:{

id:666,

title:‘你好’

}

}"

跳转

2.params参数

a. 配置路由时，声明接收 params 参数

使用**:占位符，声明接收 params 参数，😗*占位符后紧跟要传递的参数名称，多个参数之间，使用 / 连接

{

path:‘/home’,

component:Home,

children:[

{

path:‘news’,

component:News

},

{

component:Message,

children:[

{

name:‘detailed’,

path:‘detail/:id/:title’, //使用占位符声明接收params参数

component:Detail

}

]

}

]

}

b.跳转时传递参数

有以下两种写法：字符串写法和对象写法

跳转

<router-link

:to="{

name:‘detailed’,

params:{

id:666,

title:‘你好’

}

}"

跳转

注意事项：

to 的字符串写法中，不需要加 ? 和 & ，这一点和query参数不一样！

使用 to 的对象写法，则不能使用 path 配置项，必须使用 name 配置！

c. 接收参数：

使用 $route.params.参数名字，来获取参数值，这一点和 query 同理

$route.params.id

$route.params.title

三、路由的props配置

---

1.好处： 让路由组件更方便的收到参数

2.三种写法

第一种：props 值为对象，该对象中所有的 key-value 的组合最终都会通过 props 传给 Detail 组件

{

name:‘detailed’,

path:‘detail/:id’,

component:Detail,

//第一种写法：

//props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件

props:{a:900}

}

第二种：props 值为布尔值，布尔值为true，则把路由收到的所有 params 参数通过 props 传给 Detail 组件

{

name:‘detailed’,

path:‘detail/:id’,

component:Detail,

//第二种写法：

//props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。