美文网首页
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、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • vue总结

    vue路由守卫 vue实现双向绑定原理 Vue生命周期: vue跨域方式 vue-router实现原理 vue-r...

  • 一起学Vue:路由(vue-router)

    前言 学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题...

  • 第四天

    1、vue-router实现原理? 1.hash url后面会有#号 通过window.onhashchange...

  • Vue路由 ---- vue-router

    vue-router 中常用的 hash 和 history 路由模式实现原理吗? Two Point!!! sp...

  • 58转转前端面经

    一面: 自我介绍 vue双向绑定原理,用了js哪些方法实现 vue-router原理 ES6了解哪些 webpac...

  • vue-router实现原理

    1.编写路由,routes;包括路径,及映射组件 2.创建路由实例 mode设置为history表示利用了hist...

  • vue-router实现原理

    随着前端应用的业务功能起来越复杂,用户对于使用体验的要求越来越高,单面(SPA)成为前端应用的主流形式。大型单页应...

  • vue-Router原理实现

    vue-Router有两种模式 Hash 与 History Hash 模式是基于锚点,以及 onhashchan...

  • Vue-Router 原理实现

    使用步骤 1.创建router对象,router/index.js 2.注册router 对象, main.js ...

网友评论

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

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