美文网首页
vue-router实现原理

vue-router实现原理

作者: 牛妈代代 | 来源:发表于2019-07-24 11:37 被阅读0次

    1.编写路由,routes;包括路径,及映射组件

        const routes=[
                    {path:"/",component:First},
                    {path:"/second",component:Second},
                    {path:"/three",component:Three},
                    {path:"/four",component:Four}
        ]
    

    2.创建路由实例

    const router=new VueRouter({
        mode:"history",            //切换路由模式为history,不然路径为/#/home
        scrollBehavior:()=>({       //设置滚动条位置
            y:0
        }),
        linkActiveClass:"active",    //设置点击样式
        routes,                     //这个好像只能用routes,注意没有r
    
    
    })
    

    mode设置为history表示利用了history.pushState api来完成页面跳转,无需重新加载页面
    mode的三种模式:
    1)hash模式:使用url hash值来作为路由,值所有浏览器
    2)history模式:依赖H5 history api和服务器配置
    3)abstract:支持所有JavaScript运行环境,如果没有发现浏览器的api,会强制进入该模式;

    3.挂载实例

    new Vue({
        el:"#app",
        router
    })
    

    相关文章

      网友评论

          本文标题:vue-router实现原理

          本文链接:https://www.haomeiwen.com/subject/edztrctx.html