三分钟超级简单易上手的路由SPA实现思路~~

今日分享内容

一、SPA简介

SPA是什么?

 二、路由实现思路

第一步:引入路由js的依赖

第二步:创建自定义组件

第三步: 定义路由与组件的对应关系

第四步:生成路由对象然后传 `routes` 配置

第五步:将vue对象挂载到vue实例中

第六步:定义锚点 

第七步:触发锚点事件


一、SPA简介

SPA是什么?

用于单页面Web应用(single page application,SPA),就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序。

 单页面应用程序:
         只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中。
 传统多页面应用程序:
           对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面 
 。

三分钟超级简单易上手的路由SPA实现思路~~_第1张图片

对于以前 使用的jsp做页面的时候,一个页面会有很多个jsp组成,现在我们点击导航栏,不再是跳转页面,通过路由的方式,跳转到组件,将使用SPA用于html页面处理多结构复杂的组件通信问题。

优势:

     ①减少了请求体积,加快页面响应速度,降低了对服务器的压力   
     ②更好的用户体验,让用户在web app感受native app的流畅


  二、路由实现思路

首先进入官网BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

找到相对应的js版本,

三分钟超级简单易上手的路由SPA实现思路~~_第2张图片

第一步:引入路由js的依赖

 

第二步:创建自定义组件

 const Home = Vue.extend({});

注意:

         ①extend是构造一个组件的语法器. 你给它参数,他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里,也可以在任意vue模板里使用car组件。

        ②也可以用以前的方式创建和获得组件,效果也是一样的。
           Vue.component("button-counter", {...});//创建组件
       var ButtonCounter = Vue.component('button-counter');//获得组件

第三步: 定义路由与组件的对应关系

 var routes = [{path: '/about',component: About}];

 注意:根路径“/”

第四步:生成路由对象然后传 `routes` 配置

  const router = new VueRouter({routes:routes});

注意:

         route和router的区别
         route:路线
         router:路由器
         路由器中包含了多个路线

第五步:将vue对象挂载到vue实例中

var vm = new Vue({router: router}).$mount('#app'); 

第六步:定义锚点 

  

第七步:触发锚点事件

     
     
     
      首页

步骤解析如图所示:

三分钟超级简单易上手的路由SPA实现思路~~_第3张图片

代码块展示:



	
		
		
		
		
		
		1、路由SPA
	
	
		
		
首页 关于

 运行效果展示:

当点击首页时会出现以下效果

三分钟超级简单易上手的路由SPA实现思路~~_第4张图片

 点击关于时:

三分钟超级简单易上手的路由SPA实现思路~~_第5张图片


 三、无痕浏览 

replace 

 三分钟超级简单易上手的路由SPA实现思路~~_第6张图片


 今日分享内容到此结束,希望对您有所帮助喔~

预告下期内容:【nodeJS环境搭建】

我们下期再见!!!

你可能感兴趣的:(vue.js,前端,javascript,json,java)