#

# vue-router 源码

# vue-router 路由模式

# hash 模式（#）

SEO 不友好，资源不变，不会刷新。

# history 模式（/）

SEO 友好，重新请求资源。

history 模式发布时出现的问题：

发布到服务器上时，点击路由跳转正常但是刷新后路由跳转 404，出现的原因刷新后跳转的根路径并不是当前项目的 index.html 导致资源路径不匹配单页面应用路由，采取的方法是每次请求资源都 fallback 到 index.html 文件，可以使用静态资源服务器的支持。（例如在 nginx 中 location 字段添加：try_files 字段）

# vue-router 内部处理

# vue-router 主体架构：

当使用 vue.use (vue-router) 时，会执行 vue-router 导出的实例中的 install 方法，将 app 作为参数传入，内部会用 app.component 注册两个全局组件 RouterLink 和 RouterView，接着在 app.config.globalProperties 上设置$route和$ router 属性，通过 app.provide 将 router 和 currentRoute 传递下去。

# 路由变化但不跳转原理：

history.pushState 和 history.replaceState 方法，会改变地址栏的但不进行跳转。

# history 模式实现路由匹配：

内部的 mather 函数会将 routes 中的 path 路径转为正则表达式，与当前的路由进行匹配，匹配成功就将对应的组件添加到 router-view 中。

# router-view 实现路由展示：

import { defineComponent } from vue;

import Home from '../views/Home';  // 导入默认的全部组件

const routerView =  defineComponent({

    name:"routerView",

    props:{},

    setup(props , { slots }){

        return ()=>{

            //return h ('div',{        // 不使用组件默认的方式

            //     class:'routerViewClass',

            //     onClick(){

            //         // 处理点击 逻辑

            //     },

            // },slots.default())

            return h(Home,{

                onClick(){

                    // 处理对应的逻辑

                }

            })

        }

    },

})

export default routerView;

路由 provide 一个 currentRoute（shallowRef 对象）将当前的路由路径捆绑在一起，传递下去，当 currentRoute 发生变化的时候就会改变相应的 router-view。