前端八股文 Vue下

Vue-Router 路由

文章目录

[1. 对前端路由的理解](#1. 对前端路由的理解)
[2.VueRouter是什么, 有那些组件](#2.VueRouter是什么, 有那些组件)
[3. \ $route 和\\$ router 的区别](#3. $route 和$router 的区别)
4.路由开发的优缺点
[5. VueRouter的使用方式](#5. VueRouter的使用方式)
[6. vue-router 路由模式有几种？](#6. vue-router 路由模式有几种？)
[7. 路由跳转有那些方式](#7. 路由跳转有那些方式)
[8. 如何获取页面的hash变化](#8. 如何获取页面的hash变化)
[9. 路由的传参方式](#9. 路由的传参方式)
[10. params和query的区别](#10. params和query的区别)
[11. 路由配置项常用的属性及作用](#11. 路由配置项常用的属性及作用)
[12. 路由重定向和404](#12. 路由重定向和404)
[13. Vue-router 导航守卫有哪些](#13. Vue-router 导航守卫有哪些)

1. 对前端路由的理解

在前端技术早期，一个 url 对应一个页面，如果要从 A 页面切换到 B 页面，那么必然伴随着页面的刷新。这个体验并不好，不过在最初也是无奈之举------用户只有在刷新页面的情况下，才可以重新去请求数据。

后来，改变发生了------Ajax 出现了，它允许人们在不刷新页面的情况下发起请求；与之共生的，还有"不刷新页面即可更新页面内容"这种需求。在这样的背景下，出现了 SPA（单页面应用）。

SPA极大地提升了用户体验，它允许页面在不刷新的情况下更新页面内容，使内容的切换更加流畅。但是在 SPA 诞生之初，人们并没有考虑到"定位"这个问题------在内容切换前后，页面的 URL 都是一样的，这就带来了两个问题：

SPA 其实并不知道当前的页面"进展到了哪一步"。可能在一个站点下经过了反复的"前进"才终于唤出了某一块内容，但是此时只要刷新一下页面，一切就会被清零，必须重复之前的操作、才可以重新对内容进行定位------SPA 并不会"记住"你的操作。
由于有且仅有一个 URL 给页面做映射，这对 SEO 也不够友好，搜索引擎无法收集全面的信息

为了解决这个问题，前端路由出现了。

前端路由可以帮助我们在仅有一个页面的情况下，"记住"用户当前走到了哪一步------为 SPA 中的各个视图匹配一个唯一标识。这意味着用户前进、后退触发的新内容，都会映射到不同的 URL 上去。此时即便他刷新页面，因为当前的 URL 可以标识出他所处的位置，因此内容也不会丢失。

那么如何实现这个目的呢？首先要解决两个问题：

当用户刷新页面时，浏览器会默认根据当前 URL 对资源进行重新定位（发送请求）。这个动作对 SPA 是不必要的，因为我们的 SPA 作为单页面，无论如何也只会有一个资源与之对应。此时若走正常的请求-刷新流程，反而会使用户的前进后退操作无法被记录。
单页面应用对服务端来说，就是一个URL、一套资源，那么如何做到用"不同的URL"来映射不同的视图内容呢？

从这两个问题来看，服务端已经完全救不了这个场景了。所以要靠咱们前端自力更生，不然怎么叫"前端路由"呢？作为前端，可以提供这样的解决思路：

拦截用户的刷新操作，避免服务端盲目响应、返回不符合预期的资源内容。把刷新这个动作完全放到前端逻辑里消化掉。
感知 URL 的变化。这里不是说要改造 URL、凭空制造出 N 个 URL 来。而是说 URL 还是那个 URL，只不过我们可以给它做一些微小的处理------这些处理并不会影响 URL 本身的性质，不会影响服务器对它的识别，只有我们前端感知的到。一旦我们感知到了，我们就根据这些变化、用 JS 去给它生成不同的内容。

2.VueRouter是什么, 有那些组件

Vue Router 是官方的路由管理器。它和 Vue.js 的核心深度集成，路径和组件的映射关系, 让构建单页面应用变得易如反掌。
router-link 实质上最终会渲染成a链接
router-view 子级路由显示
keep-alive 包裹组件缓存

3. $route 和$ router 的区别

$route 是"路由信息对象"，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数
$router 是"路由实例"对象包括了路由的跳转方法，钩子函数等。

4.路由开发的优缺点

优点：

整体不刷新页面，用户体验更好

数据传递容易, 开发效率高

缺点：

开发成本高(需要学习专门知识)

首次加载会比较慢一点。不利于seo

5. VueRouter的使用方式

使用Vue.use( )将VueRouter插入

创建路由规则

创建路由对象

将路由对象挂到 Vue 实例上

设置路由挂载点

6. vue-router 路由模式有几种？

Vue Router 提供三种模式:

hash模式、history模式、Abstract模式

hash 模式（默认）

URL 格式：http://localhost:8080/#/user/123

后面的部分不会发送到服务器，所以刷新不会影响服务端。

依赖 window.onhashchange 事件来监听路由变化。

优点：实现简单、兼容性好、不需要后端配置。

缺点：URL 带 #，不够美观，不利于 SEO。

history 模式

URL 格式：http://localhost:8080/user/123

利用 HTML5 的 history.pushState / replaceState / popstate API。

优点：URL 干净美观，像传统多页面应用。

缺点：需要后端支持，如果用户直接访问 http://oursite.com/user/123，服务端必须返回 index.html，否则会 404。

abstract 模式

不依赖浏览器环境（没有 window 和 document 也能运行）。

Vue Router 会自动检测环境，如果没有浏览器 API，就进入 abstract。

使用一个数组模拟路由历史，常见于服务端渲染（SSR）或移动端原生环境。

7. 路由跳转有那些方式

1、this.$router.push()跳转到指定的url，并在history中添加记录，点击回退返回到上一个页面

2、this.$router.replace()跳转到指定的url，但是history中不会添加记录，点击回退到上上个页面

3、this.$router.go(n)向前或者后跳转n个页面，n可以是正数也可以是负数

编程式导航使用的方法以及常用的方法

路由跳转： this.$router.push()

路由替换 : this.$router.replace()

后退： this.$router.back()

前进：this.$router.forward()

8. 如何获取页面的hash变化

Vue Router（hash 模式）

javascript 复制代码

<script setup>
import { useRoute, watch } from 'vue-router'

const route = useRoute()

watch(
  () => route.hash,
  (newHash, oldHash) => {
    console.log('路由 hash 变化:', oldHash, '→', newHash)
  }
)
</script>

9. 路由的传参方式

声明式导航传参

在 router-link 上的 to 属性传值,

1./path?参数名=值

接收传递过来的值: $route.query.参数名

2./path/值/值 --> 需要路由对象提前配置 path: "/path/参数名"

接收传递过来的值: $route.params.参数名

编程式导航传参

this.$router.push( ) 可以不参数,根据传的值自动匹配是path还是name

因为使用path会自动忽略params ,所以会出现两种组合
(1) name+params 方式传参

A页面传参

javascript 复制代码

this.$router.push({
    name: 'xxx', // 跳转的路由
    params: {
      id: id   // 发送的参数
    }
})

B页面接收传参：

this.$route.params.id

(2) path+query 方式传参

A页面传参

javascript 复制代码

this.$router.push({
    path: '/xxx', // 跳转的路由
    query: {
      id: id    // 发送的参数
    }
})

B页面接参：

this.$route.query.id

10. params和query的区别

有一个用户详情页 /user

用 query 传参

javascript 复制代码

// 跳转
this.$router.push({ path: '/user', query: { name: 'Tom', age: 20 } })

📌 URL 会变成：

javascript 复制代码

/user?name=Tom&age=20

📌 在组件里取：

javascript 复制代码

this.$route.query.name // "Tom"
this.$route.query.age  // 20

👉 特点：

参数写在 ? 后面，很明显。
刷新页面时，这些参数还在 URL 里，不会丢失。

用 params 传参

javascript 复制代码

// 假设路由配置是：/user/:id
{ path: '/user/:id', name: 'user', component: User }

// 跳转
this.$router.push({ name: 'user', params: { id: 123 } })

📌 URL 会变成：

javascript 复制代码

/user/123

📌 在组件里取：

javascript 复制代码

this.$route.params.id // 123

👉 特点：

参数写在路径里，更像 RESTful 风格 /user/123。
如果你没有在 path 里定义 :id，而是直接写：
javascript 复制代码
```
this.$router.push({ name: 'user', params: { id: 123 } })
```
URL 还是 /user，id 就不会显示在地址栏上。
这样刷新页面就会丢失参数，因为浏览器不会帮你保存内存里的 params。

11. 路由配置项常用的属性及作用

路由配置参数：

path : 跳转路径 component : 路径相对于的组件 name:命名路由 children:子路由的配置参数(路由嵌套) props:路由解耦 redirect : 重定向路由

12. 路由重定向和404

1 . 路由重定向（redirect）

概念:

当某个路径被访问时，不渲染自身，而是强制跳转到另一个指定路径。

用于：默认页面、旧地址迁移、新老路由兼容。

写法示例

javascript 复制代码

const routes = [
  { path: '/', redirect: '/find' },     // 默认打开首页 → /find
  { path: '/home', redirect: '/find' }, // 访问 /home 强制跳到 /find
  { path: '/find', component: Find }
]

👉 原理：

用户访问 / → 先匹配上 { path: '/' } → 发现有 redirect → 强制跳转到 /find → 再去路由表里重新匹配

2 . 404 页面（兜底路由）

概念

如果用户访问的路径没有任何规则匹配，就进入兜底规则，显示一个错误页面（通常是 404）。保证用户不会看到白屏。

写法示例

javascript 复制代码

const routes = [
  { path: '/', redirect: '/find' },
  { path: '/find', component: Find },
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound } // Vue3 写法
]

👉 注意：

Vue2 里常写 path: '*' 表示兜底。

Vue3 里语法改成 /:pathMatch(.*)*，因为 * 被废弃了。

13. Vue-router 导航守卫有哪些

全局守卫：beforeEach、beforeResolve、afterEach

路由独享的守卫：beforeEnter

组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

前端八股文 Vue下

文章目录

1. 对前端路由的理解

2.VueRouter是什么, 有那些组件

3. route 和router 的区别

4.路由开发的优缺点

5. VueRouter的使用方式

6. vue-router 路由模式有几种？

7. 路由跳转有那些方式

8. 如何获取页面的hash变化

9. 路由的传参方式

10. params和query的区别

11. 路由配置项常用的属性及作用

12. 路由重定向和404

13. Vue-router 导航守卫有哪些

3. $route 和$ router 的区别