vue-router实现原理

2019-07-24  本文已影响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
})
上一篇下一篇

猜你喜欢

热点阅读