vue router vue router原理

一、vue3 router详解和用法

1、Vue3Router的安装：

安装Vue3Router的步骤并没有什么不同，可以使用yarn或npm安装MPM包，对于命令行工具，我们可以使用yarnaddvue-router或者npminstall--savevue-router安装这个工具。

2、Vue3Router的基本用法：

Vue3Router的基本用法很简单，在使用之前，你需要实例化这个router，用一个Vue实例和一些路由配置作为参数来实例化它，然后再把它挂载到Vue实例上，接下来把它添加到模板中。

3、Vue3Router的常用API：

Vue3Router提供了一系列的API以帮助我们更好的使用这个工具，比如push，replace，go，back，match，要想深入的研究它们可以去看官方的文档，有一系列的API以及它们的详细说明。

二、vue-router详解

vue-router是专门为Vue.js设计的官方路由器，用于构建单页面应用程序。它允许开发者通过简单的路由配置，将不同页面映射到不同的URL，实现页面间的无缝跳转和切换。通过vue-router，开发者可以轻松地实现页面的嵌套、参数传递、重定向、路由动画等功能。

此外，vue-router还支持导航守卫、路由懒加载、路由元信息等高级特性，为开发者提供了灵活且强大的路由管理工具。

三、vue-router的两种模式的区别

区别在于URL的呈现方式和浏览器历史记录的管理方式不同。

1.Hash模式：

-URL带有#符号，例如：。

-Hash模式下，URL的hash值会被VueRouter解析，当hash值发生变化时，VueRouter可以根据配置的路由规则动态显示对应的组件。

-使用hash模式，不需要服务端特殊配置，因为hash值不会传递给服务器，所有的路由都在前端进行处理。

-在hash模式下，通过修改hash值，可以实现前端路由的跳转，且可以通过浏览器的前进、后退按钮进行导航。

2.History模式：

-URL不带#符号，例如：。

-History模式使用了HTML5的history.pushStateAPI，在不刷新页面的情况下修改URL，并根据配置的路由规则显示对应的组件。

-使用history模式，需要服务端的支持，因为在history模式下，URL的路径会被发送到服务器进行解析，所以需要确保服务器配置正确，避免出现404错误。

-在history模式下，可以实现更加友好的URL，不带有#符号，更符合传统的URL风格。但同时也需要注意浏览器兼容性问题。