Vue 路由面试题详解

阿贾克斯的黎明

于 2024-10-08 21:34:41 发布

阅读量648

点赞数 20

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57836225/article/details/142770025

版权

前端专栏收录该内容

147 篇文章 1 订阅

订阅专栏

在前端面试中，Vue 的路由相关问题常常被提及。本文将结合视频内容，详细介绍 Vue 路由的常见面试题，并在适当的地方加入 Vue3 的相关内容及代码示例，以帮助大家更好地理解和掌握这些知识点。

一、Vue 路由模式

1. 路由模式种类

在 Vue 中，路由模式主要有两种：哈希（hash）模式和历史（history）模式。

默认情况下，Vue 走的是哈希模式。
可以通过配置修改为历史模式。

2. 两种模式的区别

表现形态不同：
- 历史模式下，URL 看起来更加简洁美观，没有类似锚点的井号（#）。
- 哈希模式的 URL 会带有一个井号。
请求处理不同：
- 历史模式下，如果跳转的页面不存在，会发送请求。
- 哈希模式下，即使页面不存在，也不会发送请求。
打包后自测方式不同：
- 打包后前端自测时，应使用哈希模式。如果使用历史模式，可能会出现空白页。

以下是 Vue3 中设置路由模式的代码示例：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(), // 设置为历史模式
  routes: [
    // 路由配置
  ],
});

export default router;

二、单页面应用（SPA）及其缺点

1. SPA 简介

SPA 即单页面应用，Vue 项目一旦打包，通常只有一个 index.html 文件。

2. SPA 的缺点

SEO 优化不好：
- SEO 讲究多页面，且能动态改变页面的标题、描述和关键字等。但单页面应用只有一个 HTML 文件，蜘蛛抓取效果不佳，动态改变标题等信息也难以被抓取到。
- 解决方法：可以使用服务器端预渲染等操作来改善 SEO。
性能问题：
- 整个项目的所有内容都放到一个 index.html 里，可能会涉及到用 JS 将内容加载到一个 div 中，从而造成重绘、回流等问题，导致性能不佳。

三、路径传值

在 Vue 路由中，有两种路径传值方式：显示传值和隐藏传值。

1. 显示传值

通过 this.$router.push 并传递参数，可以在 URL 上看到传递的参数。例如：

this.$router.push({ path: '/about', query: { A: '1' } });

在接收页面，可以通过 this.$route.query 获取参数：

console.log(this.$route.query);

2. 隐藏传值

隐藏传值不能在 URL 上看到传递的参数。通过 this.$router.push 并使用 name 属性和参数进行传递。例如：

this.$router.push({ name: 'about', params: { A: '1' } });

接收页面可以直接打印 this.$route.params 获取参数：

console.log(this.$route.params);

在 Vue3 中，路径传值的方式基本相同，代码示例如下：

import { useRouter } from 'vue-router';

const router = useRouter();

// 显示传值
router.push({ path: '/about', query: { A: '1' } });

// 隐藏传值
router.push({ name: 'about', params: { A: '1' } });

四、路由导航守卫

1. 导航守卫分类

路由导航守卫分为三大类：全局导航守卫、路由独享守卫和组件内守卫。

全局导航守卫：有三个，参数通常为 to、from 和 next。
路由独享守卫：只有一个。
组件内守卫：有三个，但很少使用，因为维护成本高。

2. 导航守卫的使用场景及作用

导航守卫可以理解为保安或将士，在进入某个页面之前进行拦截。例如在电商项目中，点击订单管理时，如果用户处于登录状态，则正常跳转到订单管理页面；如果未登录，则跳转到登录页。

以下是 Vue3 中全局导航守卫的代码示例：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ],
});

router.beforeEach((to, from, next) => {
  console.log(to, from, next);
  // 判断登录状态
  const isLoggedIn = true; // 假设已登录
  if (isLoggedIn) {
    next();
  } else {
    next('/login');
  }
});

export default router;

五、动态路由

1. 动态路由的使用场景

不是所有项目都会用到动态路由，其场景通常是在详情页，如文章详情页或商品详情页。

2. 动态路由的配置

动态路由可以通过在路由配置中使用冒号（:）加上参数名来实现。例如：

const routes = [
  {
    path: '/list/:id',
    component: ListDetailComponent,
  },
];

在 Vue3 中，动态路由的配置方式类似，代码示例如下：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/list/:id',
      component: ListDetailComponent,
    },
  ],
});

export default router;

通过以上对 Vue 路由面试题的详细解析，希望能帮助大家在面试中更好地应对相关问题，并加深对 Vue 路由的理解和掌握。同时，结合 Vue3 的内容和代码示例，也能让大家了解到 Vue 技术的不断发展和变化。