在单页应用中，用户在浏览器中的导航不会导致整个页面重新加载，而是通过动态替换页面的部分内容来模拟页面之间的导航。这种模式可以提供更流畅的用户体验，因为不需要等待整个页面的加载。在 Vue 中，我们可以通过前端路由技术来轻松地实现单页应用的开发。

路由

何为路由？在 Web 开发中，"router"（路由器）是指一种用于管理应用程序中不同页面或视图之间导航的机制。在单页应用（SPA, Single Page Application）中，前端路由器（如 Vue Router）被用来管理不同视图之间的导航，而不是像传统的多页应用那样通过服务器端重定向来加载新的页面。

安装

在 Vue router 的官方文档中，我们看到可以通过如下命令去安装一个路由；

npm install vue-router@4

创建路由实例

然后我们可以在 src 目录下创建 router 文件夹来存放路由文件；

index.js

// 导入 Vue Router 的 createRouter 和 createWebHistory 方法，用于创建路由实例和配置浏览器历史记录
import { createRouter,createWebHistory } from 'vue-router'

// 创建一个空的路由数组，用于存储所有的路由配置
const routes = [
    {
        path: '/home',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/bot',
        component: () => import('../views/Bot.vue') // 懒加载
    },
    {
        path: '/hot',
        component: () => import('../views/Hot.vue')
    }
]

// 创建一个路由实例，传递两个参数：history 和 routes
// 通过 createWebHistory 创建一个基于浏览器历史记录的路由模式
// 将 routes 数组作为该路由实例的路由配置
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

// 将创建的路由实例导出，以便在其他地方使用
export default router

在上面的路由配置项中，path 代表的是 URL 的路径；component 是与该路由关联的组件，这里我们使用了懒加载，当路由跳转到当前路径后，再按需加载组件，这样的性能更好。

注册路由插件

以上就是一个基本的路由文件代码；如果我们要在全局文件中使用路由，还需要去入口文件中引入router；让路由在 Vue 环境中生效。

路由组件

router-link

在 Vue.js 中，router-link 是 Vue Router 提供的一个组件，用于创建导航链接。当你在一个 Vue 单页应用中使用 Vue Router 时，router-link 组件可以让你轻松地创建从一个视图到另一个视图的导航链接，而无需使用传统的 HTML a 标签。

而 router-link 组件的基本用法也非常简单；你需要指定 to 属性，该属性可以是一个字符串路径或一个对象，用于指定要导航到的路由。

<template>
  <nav>
    <router-link to="/home">首页</router-link> |
    <router-link to="/bot">BOT</router-link> |
    <router-link to="/hot">沸点</router-link> 
  </nav>
</template>

当我们点击首页的时候，url地址栏就会被修改，并且路径为"/home"。

router-view

router-view 也是 Vue Router 提供的一个特殊组件；用于展示与当前活动路由相匹配的视图（views）组件，它决定了应用中哪个组件会被渲染。

<template>
  <nav>
    <router-link to="/home">首页</router-link> |
    <router-link to="/bot">BOT</router-link> |
    <router-link to="/hot">沸点</router-link> 
  </nav>
<!-- 路由入口 -->
 <router-view></router-view>
</template>

当我们来到 "/home" 下时，组件 router-view 就会去路由文件的 routes 中寻找路径匹配的组件并将其渲染到页面上。

路由跳转

在 Vue 中，我们要实现路由的跳转；有两种方式，第一种就是刚刚介绍的路由组件 router-link ，除了这个，我们还有一种编程式的路由跳转，router.push()，通过push的方式也能够实现路由的跳转。

router.push()

router.push() 是 Vue Router 提供的一个方法，用于程序化地导航到一个新的路由。通常情况下，我们使用 <router-link> 组件来创建导航链接，但在某些情况下，我们需要在组件的方法或事件处理程序中进行导航，这时就可以使用 router.push()。

<template>
    <div>
        <h2>home page</h2>
        <button @click="goHot">去沸点</button>
    </div>
</template>

<script setup>
// import router from '../router'
import { useRouter } from 'vue-router'

const router = useRouter()  // 获取 router 实例

const goHot = ()=> {
    console.log(router);
    router.push('/hot')  // 跳转到 hot 页面
}
</script>

路由传参

在 Vue.js 中，路由传参是通过 Vue Router 实现的一种机制，用于在不同的视图或页面之间传递数据。

query

在 Vue 中，我们可以使用 query 对象来传递查询参数。当你导航到一个新的路由时，可以通过 query 属性来指定查询参数。

<template>
    <div>
        <h2>home page</h2>
        <button @click="goHot">去沸点</button>
    </div>
</template>

<script setup>
// import router from '../router'
import { useRouter } from 'vue-router'

const router = useRouter()  // 获取 router 实例

const goHot = ()=> {
    router.push({
        path: '/hot',
        query: {
            id: 123
        }
    })
}
</script>

在组件内部，我们可以通过 $route.query 来访问查询参数。这是一个对象，包含了所有传递给当前路由的查询参数。

<template>
    <div>
        <h2>hot page --- {{route.query.id}}</h2>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()  // 当前路由地址的详细描述
console.log(route);
</script>

params

在 Vue.js 中，params 是 Vue Router 中用于处理动态路由参数的一种机制。动态路由参数允许你在 URL 中使用变量来表示动态的部分，这些变量可以用来传递数据给目标组件。params 是一个对象，它包含了与当前路由匹配的所有动态参数。

<template>
    <div>
        <h2>home page</h2>
        <button @click="goHot">去沸点</button>
    </div>
</template>

<script setup>
// import router from '../router'
import { useRouter } from 'vue-router'

const router = useRouter()  // 获取 router 实例

const goHot = ()=> {
    router.push({
        name: 'hot',
        params: {
            id: 123
        }
    })
}
</script>

为了使用动态路由参数，你需要在路由配置中定义动态段。动态段是 URL 中带有冒号 (:) 的部分，表示这部分路径是动态的。

同样的，我们可以通过$route.params 来访问动态路由参数。

<template>
    <div>
        <h2>hot page --- {{$route.params.id}}</h2>
    </div>
</template>

除此之外，我们还可以用 defineProps 去接收params传过来的参数；

<template>
    <div>
        <h2>hot page --- {{$route.params.id}} --- {{id}}</h2>
    </div>
</template>

<script setup>
const props = defineProps({
    id: String
})
console.log(props.id);
</script>

小结

前端路由 router ，可以模拟当url改变时，切换显示不同的组件，实现成多页的效果；并且还能在路由跳转的时候进行传递参数；传递参数有两种方式，通过query或params对象传递，其中query传递的参数可以通过route.query.id接收，而params传递的参数可以用route.params.id和const props = defineProps({id: String})两种方式去接收参数；route对象可以通过useRoute()得到，表示的是当前url的详细信息。