1.【vue-router源码】三、由源理解Vue-router中的由源Matcher
2.Vue3 路由（通过不同的 URL 访问不同的内容）
3.Vue-Router 使用和原理简单实现
4.vue router 4 源码篇：路由matcher的前世今生
5.一文彻底学会Vue3路由:全面讲解路由流程、路由模式、由源传参等——全栈开发之路--前端篇（7）路由详解
6.vue路由，二级路由及跳转

【vue-router源码】三、由源理解Vue-router中的由源Matcher

       在深入探究vue-router的内部机制时，我们关注的由源消息队列源码链接重点是Matcher的实现。这个系列文章基于vue-router v4.0.的由源源码，如果你尚未熟悉vue-router的由源基本用法，建议先通过官网学习。由源

       Matcher在vue-router中的由源角色至关重要，它是由源每个定义路由的转换器，负责路由的由源创建、修改和删除。由源createRouter函数通过createRouterMatcher生成Matcher，由源它接收路由表routes和全局选项globalOptions作为输入。由源

       在createRouterMatcher中，首先创建matchers和matcherMap来存储处理后的RouteRecordMatcher。遍历routes，调用addRoute方法对每个路由进行处理。addRoute处理新路由时，会标准化路由信息，如果新路由是别名，则将其关联到原始记录的aliasOf属性。

       addRoute还会处理路由的别名，生成新的gdbstub源码下载matcher，并递归处理子路由。最后，它返回一个删除原始matcher的方法。createRouteRecordMatcher是addRoute的重要部分，它根据token数组（如/:id(\\d+)new）生成正则表达式和解析器。

       token是解析路径的关键，它定义了路径的结构，包括静态部分和动态参数。tokenizePath函数通过有限状态机将路径转换成token数组。tokensToParser则根据token构建正则表达式和处理函数，用于解析和生成路径。

       createRouteRecordMatcher利用上述工具，构建最终的matcher，包含了路径信息、动态参数处理、权重计算等功能。Matcher的存储机制也值得注意，matchers数组按照权重排序，而matcherMap则只保存原始路由的记录，便于按名称查询。

       总的来说，Matcher是vue-router实现路由匹配和管理的核心组件，它通过token数组和相关函数，实现了路由的黄瓜直播源码高效管理和解析。

Vue3 路由（通过不同的 URL 访问不同的内容）

       Vue 路由实现多视图的单页 Web 应用，需引入 vue-router 库。

       Vue.js 与 vue-router 结合，轻松构建单页应用， 组件用于创建导航链接， 显示对应 URL 的组件。

       使用自定义组件 而非 a 标签，可实现页面无刷新跳转，自动处理 URL 生成与编码。

       点击 后，通过 router.push() 方法改变 URL，不会产生历史记录。

       通过 的 to 属性指定目标路由，replace 属性可关闭历史记录，append 属性添加路径前缀。

       自定义标签、激活类与精确匹配类用于自定义 样式，事件如 mouseover 可触发导航。

       整体代码需配置组件与路由映射，确保 vue-router 知道渲染何处内容。

Vue-Router 使用和原理简单实现

       Vue Router 是 Vue.js 官方的路由管理器，它让构建单页面应用变得非常容易。单页面应用（SPA）的特点是一个完整的页面在加载时只会加载一个容器，其余页面的2020直播源码内容在切换时仅更新特定容器的内容，实现页面交互和跳转的无刷新体验。

       Vue Router 提供了两种实现方式：Hash 模式和 History 模式。Hash 模式通过在 URL 中添加哈希符号（#）来切换页面，而 History 模式则不包含哈希符号，能够更平滑地处理 URL 路径变化，但需要服务器端的支持。

       使用 Vue Router 可以简化单页面应用的开发。通过安装 Vue-cli 或单独引入 Vue-Router 到项目中，可以开始使用 Vue Router 的功能。

       Vue Router 的使用步骤包括：

       安装依赖

       注册路由组件

       定义路由规则，通常以数组形式呈现

       创建路由对象

       在 Vue 实例创建时注入 router 实例

       在首页显示路由组件，并可选择性实现跳转功能

       动态路由允许通过 URL 参数给组件传递数据，并且可以通过设置 props 属性将 URL 参数作为组件的 props 使用。嵌套路由则用于共享相同内容的组件，通过路由组件的显示实现内容的动态切换。

       编程式导航提供了更灵活的路由跳转方法，通常使用 $router 的方法实现。

       实现单页面路由功能，除了使用默认的 Vue Router，也可以根据项目需求自定义 Vue Router，实现特定功能，如通过自定义的 Vue Router 实现特定的导航逻辑和路由管理。

       自定义的 Vue Router 需要实现安装、构造、鲨鱼源码分享初始化、创建路由映射、组件初始化等功能，并通过 render 函数创建路由组件。事件监听和页面跳转则通过相应的方法实现。

       使用 Vue Router 实现单页面应用的路由管理，通过 Hash 模式或 History 模式，能够提供平滑的用户体验和高效的页面切换。同时，自定义 Vue Router 可以满足特定应用的路由需求，提供更灵活和个性化的解决方案。

vue router 4 源码篇：路由matcher的前世今生

       欢迎大家阅读《Vue Router 4 源码探索系列》专栏，以下是部分内容链接：[1] [2] [3] [4]

       本文将深入讲解vue-router@4.x中matcher的创建过程。createRouterMatcher执行后，返回的五个函数：addRoute, resolve, removeRoute, getRoutes, getRecordMatcher，分别负责matcher的增删改查操作，如getRoutes用于获取所有matcher，removeRoute则是删除指定的matcher。

       通过getRoutes方法，我们可以看到matcher的结构，每个matcher包含了路由对象和相关配置信息。接下来，我们将逐一解析addRoute、resolve、removeRoute等方法的执行流程。

       addRoute函数在createRouterMatcher的初始化中扮演关键角色，它会标准化处理record，合并options，然后存储在normalizedRecords数组中。同时，别名路由的处理也是在此阶段完成的。

       createRouteRecordMatcher负责生成具体的路由匹配器，通过编码和解码处理路由路径，以支持子路由、动态路由等。matcher的生成和originalRecord的处理将决定路由的匹配逻辑。

       matcher的insertMatcher方法确保了matcher的有效组织，避免重复插入，并在matcherMap中存储以支持快速检索。resolve方法内部逻辑有所不同，它根据特定规则返回匹配信息。

       removeRoute负责删除路由及其子路由和别名，getRoutes和getRecordMatcher则提供了获取matcher的便捷方式。matcherMap在整个过程中发挥重要作用。

       至此，我们对matcher有了深入理解。在下一部分，我们会探讨Vue Router 4如何结合Web History API，实现原生功能的无缝集成。感谢阅读，如需更多内容，欢迎关注我的公众号「似马非马」。

一文彻底学会Vue3路由:全面讲解路由流程、路由模式、传参等——全栈开发之路--前端篇（7）路由详解

       一文彻底掌握Vue3路由

       Vue3路由是实现页面跳转的关键，帮助构建单页面应用（SPA），如左右导航和内容展示，无刷新切换。

        1. 路由基础实践——流程梳理

       安装并配置路由：npm i vue-router, 创建router文件夹，index.ts编写路由器并绑定页面组件。

       处理可能的报错：检查并设置路由模式，如history或hash。

       创建并挂载页面组件：dog.vue, cc.vue, home.vue。

       main.ts中管理路由器，分离createApp对象并引入路由。

       app.vue中展示路由，使用RouterView组件。

       自定义路由名和跳转方式。

        2. 路由模式

       history模式：美观，需服务器配合处理路径；hash模式：兼容性好，SEO较差。

       模式选择建议：根据项目需求和SEO考虑，hash模式适合个人项目或无需SEO的情况。

        3. 嵌套路由

       基本嵌套：子路由配置，注意路径结构。

       路由传参：query和params的区别，props配置。

        4. 编程式导航

       脚本操作跳转，如自动跳转或判断条件后跳转。

       replace属性和重定向的使用。

       通过以上步骤，你将能熟练掌握Vue3路由的使用，实现顺畅的页面切换和参数传递。

vue路由，二级路由及跳转

       â˜…router文件下的index.js文件：

        /* 导入Vue构造函数 */

        import Vue from 'vue'

        /* 导入路由VueRouter构造函数 */

        import VueRouter from 'vue-router'

        /* 导入HomeView页面 */

        import HomeView from '../views/HomeView.vue'

        //调用构造函数Vue的use方法 传入VueRouter构造函数

        //作用是把VueRouter作为一个插件 全局插入到Vue中

        Vue.use(VueRouter)

        /* 定义一个路由数组对象 */

        const routes = [

          /* 一个对象就对应了一个路由

          path就是路由的地址

          name给路由起的名字

          component 具体跳转的页面

          */

          {

            /* path: '/' 根页面,表示已进入就显示的页面 */

            path: '/',

            name: 'home',

            /* 这种方式一进入页面就会全部加载,不是用到的时候再加载

               æ€§èƒ½æ²¡æœ‰æ‡’加载的方式好 */

            component: HomeView,

            /* 可以使用redirect 重定向 已进入主页就展示第一个子页面

             redirect 后面跟的是路径名 并不是name */

             /* 因为/是根路径 所有可以直接写one */

            redirect:'one',

            children:[{

              path:'one',

              name:'one',

              component: () => import('../views/OneView.vue')

            }]

          },

          {

            /* 这里是一级目录所以可以加/ 表示根目录 */

            path: '/about',

            name: 'about',

            // route level code-splitting

            // this generates a separate chunk (about.[hash].js) for this route

            // which is lazy-loaded when the route is visited.

            /* 懒加载功能 : 一开始不加载,当你切换路由的时候再加载 */

            component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),

            /* about不是根路径 所以redirect后面要写全 '/about/aboutchild', */

            redirect:'/about/aboutchild',

            children:[{

              path:'aboutchild',

              name:'aboutchild',

              component: () => import('../views/AboutChild.vue')

            }]

          },

          {

            path:'/ChildA',

            name:'ChildA',

            component: () => import('../components/ChildA.vue')

          },

          {

            /* path:'*' 必须要放最后 */

            /* path:'*' 表示上面的路由没有匹配到 则进入下面的页面 */

            path:'*',

            name:'notfound',

            component: () => import('../components/NotFound.vue')

          }

        ]

        /* 实例化构造函数 VueRouter 产生一个实例化对象

           å¹¶æŠŠä¸Šé¢çš„路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter*/

        const router = new VueRouter({

          routes

        })

        /* 把实例化路由对象 router默认导出  */

        export default router

        main.js文件：

        /* 导入Vue构造函数 */

        import Vue from 'vue'

        /* 导入App.vue入口页面 */

        import App from './App.vue'

        /* 导入router文件夹中的index.js中的router实例化对象 */

        /* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router  */

        import router from './router'

        /* 生产提示 */

        /* 改成false是用来关闭开发者提示 */

        Vue.config.productionTip = false

        /* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')

           éƒ½æ˜¯ç”¨æ¥æŒ‚载到id为#app的div上的*/

           /* 把路由实例化对象router配置在Vue中,作用是保证项目中

            所有的vue文件都可以使用router路由的属性和方法 */

        new Vue({

          router,

          /* 会把所有vue文件渲染到App组件上 */

          render: h => h(App)

        }).$mount('#app')/* 等同于 el:"#app" */

        viwes文件下：

        App.vue文件：

        <template>

          <div id="app">

            <nav>

              <!-- router-link 组件是负责跳转的 to属性是用来写跳转路径的

                  router-link组件本质上是有a标签来实现的 路由跳转的原理是根据

                  锚点来的 -->

              <router-link to="/">Home</router-link> |

              <router-link to="/about">About</router-link> |

              <router-link to="/ChildA">点我跳转ChildA</router-link> |

              <router-link to="/ChildB">点我跳转ChildB</router-link> |

            </nav>

            <!-- router-view 组件是用来展示组件的容器 -->

            <router-view/>

            <!-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转

                 ç»„件显示在 router-view 容器中 -->

          </div>

        </template>

        <style>

        #app {

          font-family: Avenir, Helvetica, Arial, sans-serif;

          -webkit-font-smoothing: antialiased;

          -moz-osx-font-smoothing: grayscale;

          text-align: center;

          color: #2c3e;

        }

        nav {

          padding: px;

        }

        nav a {

          font-weight: bold;

          color: #2c3e;

        }

        /* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */

        nav a.router-link-exact-active {

          color: #b;

        }

        </style>

        AboutView.vue文件：

        <template>

          <div class="about">

            <h1>This is an about page</h1>

            <!-- to后面写的是路径 -->

            <!-- <router-link to="/about/aboutchild">我是aboutchild</router-link> -->

            <!-- to 后面要加: 作用是把后面解析成一个对象而不是字符串 -->

            <router-link :to="{ name:'aboutchild'}">我是aboutchild</router-link>

            <!-- 二级路由显示的容器 -->

            <router-view></router-view>

          </div>

        </template>

        AboutChild.vue文件：

        <template>

          <div>

              <h1>AboutChild</h1>

          </div>

        </template>

        <script>

        export default {

        }

        </script>

        <style>

        </style>

        HomeView.vue文件：

        <template>

          <div class="home">

            <h1>KW冲冲冲</h1>

            <router-link to="/one">ONEview</router-link>

            <!-- 二级路由对应的组件容器 -->

            <router-view></router-view>

          </div>

        </template>

        <script>

        // @ is an alias to /src

        export default {

          name: 'HomeView',

          components: {

          }

        }

        </script>

        OneView.vue文件：

        <template>

          <div>

              <h1>我是ONEVIwe</h1>

          </div>

        </template>

        <script>

        export default {

        }

        </script>

        <style>

        </style>

        components文件下：

        ChildA.vue文件：

        <template>

          <div>

              <h1>我是CHildA</h1>

          </div>

        </template>

        <script>

        export default {

        }

        </script>

        <style>

        </style>

        ChildB.vue文件：

        <template>

          <div>

              <h1>我是ChildB</h1>

          </div>

        </template>

        <script>

        export default {

        }

        </script>

        <style>

        </style>

        NotFound.vue文件:

        <template>

          <div>

              <h1>我是notfound</h1>

          </div>

        </template>

        <script>

        export default {

        }

        </script>

        <style>

        </style>

        左边文件目录：

浅谈vue-router：路由原理

       前端路由系统在单页面应用中显著特点之一是允许通过更改URL，而无需重新请求页面的情况下更新视图。核心原理在于更新视图但不重新请求页面，实现这一功能主要有两种方式：Hash模式和利用HTML5的History接口。

       在Vue中，通过vue-router组件，可以通过mode参数控制路由的实现模式，它指示实际起作用的对象属性，历史实现类。默认设置为hash模式，即利用URL中的hash("#)"进行操作。hash模式下，虽然hash出现在URL中，但不会被包含在HTTP请求中，改变hash不会重新加载页面。同时，可以通过监听hash改变添加事件，为改变记录提供支持。

       HashHistory模式提供了push和replace两个方法。push方法将新路由添加到浏览器访问历史的栈顶，替换方法则替换当前路由。Hashchange事件监听浏览器地址栏中路由的变化，调用replaceHash方法实现路由替换。

       HTML5History模式利用浏览器历史记录栈提供的接口，如back()、forward()、go()等方法进行各种跳转操作。引入了pushState()和replaceState()方法，允许修改浏览器历史栈，这两个方法在改变URL后，浏览器不会立即发送请求该URL，为单页应用提供了基础。

       在HTML5History模式中，构造函数监听popState事件，通过history.pushState()和history.replaceState()方法修改URL，实现路由改变。与hash模式类似，push和replace方法在实现上也类似，但HTML5模式提供更丰富的API进行历史记录管理。

       对比两种模式，hash模式仅改变hash部分内容，而HTML5History模式则修改整个URL，这在实际开发中意味着：在hash模式下，根据URL请求页面不会有问题；而在HTML5History模式下，URL的修改与正常请求后端URL一致，可能导致未配置对应路由的URL返回错误。官方推荐在服务端增加一个覆盖所有情况的候选资源，例如返回index.html页面，以避免错误，并实现fallback功能。

       总结来说，Vue-router通过灵活的模式选择和内置的路由管理功能，提供了强大且直观的前端路由实现，满足了单页面应用中高效更新视图而不重新加载页面的需求。对于开发者而言，理解不同路由模式的原理和特点，结合实际应用场景选择合适的实现方式，是构建高效、稳定的单页面应用的关键。