单页面应用SPA

97 阅读1分钟

选项卡效果

点击对应的选项就会显示对应的内容 

原理1

     锚点操作进行页面的跳转  会在地址栏的hash上捕获到
     

图片.png

图片.png

原理2

    单页面应用SPA基于此效果运行,上述代码只是简单的显示p标签的内容,我们也可以让他显示一个完整页面的功能
    
     操作:通过将具体页面的js文件写好,该js文件包括具体页面的内容,css,js逻辑是一个完整的页面
           将其导出,在主页面上进行引入,再根据hash找到具体应该显示的页面

图片.png

图片.png

图片.png

该处调用中间js文件更加方便增加和修改操作

图片.png 注意:path:"/" 页面一开默认显示的效果,可以修改,想像是那个就显示那个

图片.png