Vue Router是Vue.js框架的官方路由管理器，它专为构建单页面应用程序（SPA）设计。在Web开发中，路由用来定义应用程序中不同URL与对应的用户界面之间的关系。简单来说，Vue Router允许开发者在用户导航至不同URL时，无须重新加载页面，就能动态切换展示不同的组件内容，从而实现页面之间的平滑过渡和交互。
怎么安装 vue router
- 对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：
npm install vue-router@4
- 如果你打算启动一个新项目，你可能会发现使用 create-vue这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：
npm create vue@latest
在是否引入 Vue Router 进行单页面应用开发？时选择是就成功安装了 vue router
- 使用包管理器的项目通常会使用 ES 模块来访问 Vue Router，例如
import { createRouter } from 'vue-router'
路由配置
接下来我们边实战边配置路由
1. 路由配置 (src/router/index.js)
import { createRouter , createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/home',
component: Home //这里需要在上面 import
},
{
path:'/bot',
component: ()=>import('../views/Bot.vue')
// 使用箭头函数和import()实现懒加载，
// 当路由被访问时才加载该组件，有助于加快首屏渲染速度和提高应用性能
},
{
// 路径为'/hot/:id'，其中':id'是动态参数，可以匹配任意字符
path: '/hot/:id',
// 为路由命名，便于在编程式导航中引
component: ()=>import('../views/Hot.vue'),
// 设置props为true，这样路由参数会被自动传递给组件的props
props:true // 路由传参
}
]
const router = createRouter({
history: createWebHistory(), // 创建了一个路由
routes:routes, // 路由规则 右边可以随便写，左边不行，因为左边是个key
//因为key名和变量名一样，这可以直接单写一个 routes
})
export default router // 导出路由实例 默认抛出引入的时候不用{} 反之则要
这里通过定义routes数组来设定应用的不同页面路径及其对应的组件。其中采用了懒加载技术以提升应用启动时的加载速度，并展示了如何设置动态路由参数以及使用命名路由和传递路由参数给组件的方式。
2. 使用 router-link 进行导航 (src/App.vue)
<template>
<nav>
<!-- 使用router-link组件进行导航，替代传统的<a>标签 -->
<!-- to属性指定了链接的目标路由路径 -->
<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>
这里要关注俩个重要的组件：<router-link> 和 <router-view>
<router-link>
<router-link> 是Vue Router提供的一个组件，用以替代标准的HTML <a> 标签来创建链接，实现页面之间的导航。它的主要特点和用途包括：
- 无页面刷新：点击
<router-link>不会导致整个页面刷新，而是通过Vue Router在客户端完成URL的切换和页面内容的更新，提供了流畅的用户体验。 - 自动管理活跃状态：
<router-link>会自动给当前激活的链接添加一个CSS类（默认为.router-link-active），方便开发者通过CSS来高亮显示当前选中的导航项。 - 支持参数传递：可以通过
to属性传递路由参数，如动态路由参数或查询字符串，非常灵活。
<router-view>
<router-view> 是Vue Router用来呈现路由组件的地方，即根据当前的URL，将与之匹配的组件渲染到<router-view>所在的位置。它是一个占位符，表示路由匹配到的组件将插入于此。
每个路由都会对应一个组件，当URL变化时，Vue Router会自动查找匹配的路由规则，并将对应的组件渲染到<router-view>中，实现组件的切换，而无需刷新页面。
3.接收参数的组件 (src/views/Hot.vue)
<template>
<!-- 页面模板部分 -->
<div>
<!-- 显示文本，其中{{$route.query.id}}会展示从URL查询参数中获取的'id'值 -->
hot page --- {{$route.query.id}}
</div>
</template>
<script setup>
// 引入Vue Router的useRoute Composition API
import { useRoute } from 'vue-router';
// 调用useRoute获取当前路由的信息
const route = useRoute();
// 在浏览器的控制台打印查询参数中的'id'值
console.log(route.query.id);
// 使用defineProps定义组件接收的属性
// 这里定义了一个名为'id'的属性，类型为String，意味着该组件期望从父组件或路由参数中接收一个字符串类型的'id'
const props = defineProps({
id: String // 指定id为字符串类型
});
</script>
在这段代码中我们需要注意以下几点：
- Vue Router的使用：展示了在Vue应用中如何利用Vue Router进行导航和传递参数。虽然代码中未直接展示
<router-link>的使用，但是通过{{$route.query.id}}表明了路由参数的读取，反映了Vue Router在处理URL参数方面的作用。 - 响应式数据绑定：通过
{{$route.query.id}}插值表达式，说明了Vue的响应式特性，页面内容能根据路由参数的变化实时更新。 - Composition API的引入：使用了Vue 3的Composition API，通过
import { useRoute } from 'vue-router'和const route = useRoute();来获取当前路由信息，展示了Vue新API在实际开发中的应用。
路由跳转
router-link
这个我们已经在上面使用过了，在这我们就不再介绍了
router.push()
2. router.push()
router.push()是Vue Router的编程式导航方法之一，用于在JavaScript代码中导航到不同的URL。相比于<router-link>，它提供了更多的灵活性，可以在特定条件下决定是否导航，或者在导航前后执行某些操作。
使用示例：
router.push('/path');
或者带有额外选项：
router.push({ path: '/path', query: { key: 'value' } });
- 可以传递字符串路径，或者一个对象包含
path、query、params等。 - 如果目标位置与当前路由相同，但参数或查询不同，
push依然会向历史记录栈添加一个新的记录，用户可以通过浏览器的后退按钮返回。
3. router.replace()
router.replace()也是编程式导航的一种方式，与router.push()相似，但它不会向浏览器的历史记录栈添加新的记录，而是替换掉当前的记录。这意味着用户无法通过后退按钮回到被替换的页面，这在某些场景下非常有用，比如表单提交成功后跳转，用户不应该能通过后退操作再次提交。
使用示例：
router.replace('/path');
- 同样接受字符串路径或对象参数。
- 适用于那些不应保留历史记录的页面跳转，提高了用户体验的一致性。
总结来说，<router-link>适合静态布局中的导航链接，而router.push()和router.replace()则在需要动态决定导航行为或执行特定逻辑时更为灵活。router.replace()相比router.push()在处理页面跳转历史时提供了不同的策略
总结
今天我们介绍了Vue Router的核心概念与实践，聚焦于构建高效单页面应用的关键技术点。从基础配置到进阶应用，内容覆盖了Vue Router的安装、基础用法、核心组件、路由跳转方式、参数传递与接收。
ok，今天的 vue router 的分享就到这了，小编还在学习中，欢迎大佬们提出建议！！！非常感谢！！！
