2024年最全路由vue_vue路由国朝大牌，2024年前端社招面试题

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

目录

1.vue_router基础使用

2.vue路由-声明式路由

3.vue路由-重定向和模式

4.vue路由 -编程式导航

---

路由的本质：

• 映射
• url和路由组件之间的关系

1.vue_router基础使用

【vue-router文档】

1.下载vue-router
      yarn add vue-router
      npm i vue-router
2.导入路由
import VUeRouter from ‘vue-router’
3.使用路由插件
Vue.use(VueRouter)
4.规则数组
 const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]
 5.创建路由对象
 const router = new VueRouter({
  routes//routes是固定的key(传入规则数组)
})
6.路由对象注入到vue实例中，this可以访问$route和$router
new Vue({
  router
})

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      7.设置挂载点-当url的hash值路径切换，显示规则里对应的组件到这
      <router-view></router-view>
    </div>
  </div>
</template>

2.vue路由-声明式路由

2.1声明式导航-基础使用

目标: 可用全局组件router-link来替代a标签

1. vue-router提供了一个全局组件 router-link
2. router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
3. router-link提供了声明式导航高亮的功能(自带类名)

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

总结: 链接导航, 用router-link配合to, 实现点击切换路由

1. router-link是什么？

VueRouter在全局注册的组件，本质就是a标签

2.router-link怎么使用/

当标签使用，必须传入to属性，指定路由路径

3.router-link好处？

自带激活是的类名，可以做高亮

2.2 声明书导航-跳转传参

目标: 在跳转路由时, 可以给路由对应的组件内传值

在router-link上的to属性传值, 语法格式如下

• /path?参数名=值
• /path/值 – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接收传递过来的值

• $route.query.参数名
• $route.params.参数名

路由定义

方式一：

to=‘/path?参数名=值’

接收：$route.query.参数名

方拾二：

路由规则path上 定义 /path/:参数名

to=“/path/值”

接收：$route.params.参数名

  {
    path: "/part",
    component: Part
  },
  {
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },

导航跳转，传值给子组件

// /path?参数名=值
// /path/值 – 需要路由对象提前配置 path: “/path/参数名”
<router-link to="/part?name=小王">小王</router-link>
<router-link to="/part/小何">小何</router-link>

接收路由传过来的参数和值

<template>
  <div>
      <p>关注明星</p>
      <p>发现精彩</p>
      <p>寻找伙伴</p>
      <p>加入我们</p>
      //$route.query.参数名
      //$route.params.参数名
      <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
  </div>
</template>

总结:

?key=value 用$route.query.key 取值

/值 提前在路由规则/path/:key 用$route.params.key 取值

3.vue路由-重定向和模式

3.1路由-重定向

目标: 匹配path后, 强制切换到目标path上

• 网页打开url默认hash值是/路径
• redirect是设置要重定向到哪个路由路径

例如: 网页默认打开, 匹配路由"/“, 强制切换到”/find"上

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 强制重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

总结: 强制重定向后, 还会重新来数组里匹配一次规则

路由 - 404页面

目标: 如果路由hash值, 没有和数组里规则匹配

默认给一个404页面

语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

创建404页面

<template>
  <img src="../assets/404.png" alt="">
</template>

在main.js中修改路由配置

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

ps://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。