面试官：你了解vue-router吗？我们先来给大家简单介绍一下今天的主角——vue-router 🐟vue-rout

我们先来给大家简单介绍一下今天的主角——vue-router

🐟vue-router

Vue - Router 是 Vue.js 的路由管理器，用于在单页面应用中建立URL与组件的映射关系，实现页面间的导航和组件的动态加载。

🐟vue-router是什么

Vue - Router 就像是一个 “导航小能手”，专门用在 Vue.js 做的网页应用里。它可以让你的网页应用在用户看来像是有好多不同的页面，但其实都是在一个网页里面变化。

🐟vue-router怎么用

你可以把它想象成一个超级智能的快递员。这个快递员（Vue - Router）知道每个 “包裹”（组件）该送到哪个 “地址”（URL 路径）。比如，你告诉它 “/home” 这个地址要送一个展示房子内部的组件（就像家里的各种家具摆设等），“/about” 这个地址要送一个介绍房子信息的组件（比如房子什么时候建的，有多大等）。

然后在网页上，有一些像特殊链接一样的东西（<router - link>），用户一点击，就相当于告诉这个 “快递员” 要把新的 “包裹”（组件）送到眼前来展示。而展示组件的地方呢，就像是一个专门的 “收货台”（<router - view>），组件就在这里被展示出来。

然后我带没有安装的童鞋安装一下vue-router，点击入门 | Vue Router（可以通过这里深度学习Vue-Router）然后点击安装，复制上面的npm install vue-router@4然后进入你的 Vue 项目目录，在项目目录下打开终端。然后粘贴到终端，执行以下命令来安装 Vue - Router。安装好了之后，就可以开始使用啦！

🐟配置路由文件

我们在src下新创一个新文件夹router,然后在router里创建index.js(为什么是index.js因为在文件系统中，index文件（如index.js、index.html等）通常被视为一个目录的 “默认” 文件。这类似于网站服务器在请求一个目录时，如果没有指定具体的文件，会默认查找和返回index.html文件。这样在后面可以简写)。

导入VueRouter（实际上是导入 createRouter,createWebHistory 或 createWebHashHistory）以及需要的组件是配置 Vue Router 的重要步骤.我们这里导入createWebHistory

import { createRouter, createWebHistory } 
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

export default router

后面几行代码是什么意思呢？

const router = createRouter({...})使用 createRouter 函数创建一个路由实例。这个函数接受一个配置对象，其中包含了路由的各种设置。

🐟路由设置

history: createWebHistory()指定了路由的历史模式为 HTML5 history 模式。这意味着 URL 将看起来像传统的网站 URL，没有 # 符号。例如，http://example.com/some/page。
如果使用 createWebHashHistory()，则会是哈希模式，URL 中带有 # 符号，如 http://example.com/#/some/page。哈希模式对服务器的配置要求较低，但 URL 看起来不太美观。
routes: routes指定了路由规则数组。这个数组中的每个元素都是一个路由对象，定义了一个特定的路径和对应的组件。例如：

🐟导出路由

export default router 在 Vue Router 的配置文件中，将创建好的路由实例作为默认导出，以便在项目的其他文件中方便地导入并使用该路由实例来实现页面导航等功能。抛出了这个对象，我们需要在main.js里导入import router from './router

现在路由就在整个项目都生效了

🐟Vue的两个关键组件

在 Vue - Router 中有两个关键的组件：<router - link>和<router - view>。

🐟router - link

它类似于 HTML 中的<a>标签，主要用于在应用内进行导航，实现页面之间的切换。当用户点击<router - link>时，会触发路由的跳转，从而加载相应的组件。我们在App.vue里写上三个router - link

    <routerLink to="/home">首页</routerLink>|
    <routerLink to="/bot">BOT</routerLink>|
    <routerLink to="/hot">沸点</routerLink>

to属性是最关键的，它可以接受一个字符串或者一个对象。当是字符串时，直接指定目标路由的路径，例如<router - link to="/home">Home</router - link>。如果是对象，可以包含更多的路由参数信息，比如动态路由的参数传递等。我们可以通过点击这三个组件，分别导航到其相应的路径，其实其底层封装的就是a标签现在我们需要创建这三个组件，我们去到src里创建pages(名字随便取,也有人习惯是view)文件夹，然后在里面创建这三个组件

他们现在还不能称之为页面，因为他还没有在路由里配置。

path是路由的路径，用户访问这个路径时会触发相应路由。可以包含动态参数，用于灵活匹配不同的 URL，如果找到匹配的路由，就会取价值组件。
component指定当该路由匹配成功时要加载显示的组件。在复杂场景下也可以用components来指定多个组件同时显示在不同位置。

import Home from '../view/Home.vue'
import Bot from '../view/Bot.vue'
import hot from '../view/Hot.vue'
const routes = [
    {
        path: '/home',
        component: Home // 需要引入
    },
    {
        path: '/bot',
        component: Bot
    },
    {
        path: '/hot',
        component: hot
    }
    ]

除了用import导入之外，还可以用懒加载，什么是懒加载

component: () => import('../view/Hot.vue'),  //懒加载  减少初次代码加载

<template>
  <div>
    <button @click="goToHome">Go to Home</button>
    <button @click="goToBot">Go to Bot</button>
    <button @click="goToHot">Go to Hot</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    goToBot() {
      this.$router.push('/bot');
    },
    goToHot() {
      this.$router.push('/hot');
    },
  },
};
</script>

🐟router.push()

router.push()是用于编程式导航的方法,它可以让你在代码中触发路由的跳转，将用户导航到指定的路由路径,除了router.push()还有router.place()，router.push会在浏览器历史记录中添加新记录，用户能通过后退按钮返回之前页面，适用于常规页面导航。router.replace则是替换当前历史记录条目，用户后退时不会回到被替换的页面，适用于不想用户返回特定页面的场景。

🐟this.$router

在 Vue 中，选项式API,$router是由 Vue Router 注入到组件实例中的属性，以$开头表示其是外部注入的特殊属性，用于访问路由实例进行编程式导航等操作，避免命名冲突并方便识别其来源。而在组合式 API 中，需要使用useRouter来显式地获取路由实例

import { useRouter } from 'vue - router';
const router = useRouter();

先导入useRouter，然后获取路由实例，就可以使用router了

🐟`query`和`params`

在 Vue 3 的路由系统中，参数的传递和获取方式多样且灵活。下面让我们通过一个生动的比喻来深入理解其中query和params参数的传递与接收机制。

使用 query 参数：这种方式就像把你的请求附加在URL后面，所有人都能看到。例如，如果你要访问“热卖区”页面，并带上一个标识为123的商品ID，你可以这样做：
```
javascript
深色版本
router.push({ path: '/hot', query: { id: 123 } });
```
这样一来，URL会显示为/hot?id=123。在目标页面中，你可以通过useRoute().query.id或（在选项API中）this.$route.query.id来读取这个ID值。
使用 params 参数：这种方法更像是将你的请求隐藏起来，通过路由配置中的动态段来传递。这通常用于更深层的导航，例如特定商品详情页。使用方法如下：
```
router.push({ name: 'HotItem', params: { id: 123 } });
```
在这种情况下，你需要确保你的路由配置中有一个名为HotItem的路由，它可以接受一个id参数，如：
```
{
  path: '/hot/:id',
  name: 'HotItem',
  component: HotItemComponent
}
```
在组件内部，你可以通过useRoute().params.id或（在选项API中）this.$route.params.id来访问这个ID值。

此外，对于params参数，你还可以选择使用<script setup>中的defineProps来预先声明你期望接收到的参数，这样可以让组件更加明确和易于维护。例如：


<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  id: String // 声明接收一个字符串类型的id参数
});
</script>

🐟useRoute

useRoute用于获取当前路由的信息，包括当前路径（path）、路由参数（params）、查询参数（query）等。

🐟defineProps

在Vue 3中，defineProps 是一个非常有用的功能，用于在 <script setup> 中定义组件接收的外部属性。以下是 defineProps 的核心用法和特点：

🐟基本用法

vue
深色版本
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  message: String // 定义名为 message 的属性，类型为字符串
});
</script>

🐟类型检查和默认值

🐟类型检查

可以指定属性的类型，支持基本类型和复杂类型。类型不匹配时，Vue 会在开发模式下发出警告。

javascript
深色版本
const props = defineProps({
  message: String, // 字符串
  count: Number,   // 数字
  isActive: Boolean, // 布尔值
  user: Object,    // 对象
  items: Array     // 数组
});

🐟设置默认值

可以为属性设置默认值，当父组件未传递该属性时，组件将使用默认值。

javascript
深色版本
const props = defineProps({
  message: {
    type: String,
    default: '默认消息'
  },
  count: {
    type: Number,
    default: 0
  }
});

🐟router - view

找到匹配的组件后，就将该组件渲染到<RouterView>所在的位置。除了用routerLink页面导航外，还可以通过编程式导航来实现。我们就需要知道vue-router提供的另一个组件<RouterView>

它是 Vue - Router 提供的一个核心组件，用于在 Vue 应用中显示当前路由所对应的组件。它充当一个 “容器” 的角色，根据路由的匹配结果动态地填充内容。

🐟END

希望 Vue Router 能够帮助你构建出优秀的单页面应用！

面试官：你了解vue-router吗？