java 单页面spa_实例讲述vue中SPA单页面应用程序

本文主要为大家详细介绍了vue中SPA单页面应用程序的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

一、SPA的概述

SPA(single page application)单页面应用程序，在一个完成的应用或者站点中，只有一个完整的html页面，这个页面有一个容器，可以把需要加载的代码片段插入到该容器中。

SPA的工作原理：

eg: http://127.0.0.1/index.html#/start

①根据地址栏中url解析完整的页面：index.html

加载index.html

②根据地址栏中url解析#后的路由地址： start

根据路由地址，去在当前应用的配置中 找该路由地址的配置对象去查找该路由地址 所对应的模板的页面地址

发起异步请求加载该页面地址

③把请求来的数据加载到指定的容器中

二、通过VueRouter来实现一个SPA的基本步骤

①引入对应的vue-router.js(该文件我已经上传到我的文件中)

②指定一个盛放代码片段的容器

③创建业务所需要的各个组件

④配置路由词典

每一个路由地址的配置对象(要加载哪个页面...)

const myRoutes = [

{path:'/myLogin',component:TestLogin},

{path:'/myRegister',component:TestRegister}

]

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter

})

⑤测试

在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的

{{msg}}

var testLogin = Vue.component("login",{

template:`

这是我的登录页面

`

})

var testRegister = Vue.component("register",{

template:`

这是我的注册页面

`

})

//配置路由词典

//对象数组

const myRoutes =[

//当路由地址：地址栏中的那个路径是myLogin访问组件

//组件是作为标签来用的所以不能直接在component后面使用

//要用返回值

//path:''指定地址栏为空：默认为Login页面

{path:'',component:testLogin},

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

const myRouter = new VueRouter({

//myRoutes可以直接用上面的数组替换

routes:myRoutes

})

new Vue({

router:myRouter,

//或者：

/*

router:new VueRouter({

routes:[

{path:'/myLogin',component:testLogin},

{path:'/myRegister',component:testRegister}

]

})

*/

el:"#container",

data:{

msg:"Hello VueJs"

}

})

SPA练习

{{msg}}

/*

需要大家创建一个SPA，这个SPA有3个组件，分别对应的是collect/detail/order

功能需求：

在地址栏中路由地址是:

/myColllect --> 收藏页组件

/myDetail --> 详情页组件

/myOrder --> 订单页组件

*/

/*

1、引入js文件

2、创建三个组件,需要返回值

3、路由词典配置(三小步)const myRoutes、const myRouter、router:myRouter,

4、指定一个盛放代码片段的容器

*/

var testCollect = Vue.component("collect",{

template:`

这是收藏页

`

})

var testDetail = Vue.component("detail",{

template:`

这是详情页

`

})

var testOrder = Vue.component("order",{

template:`

这是订单页

`

})

const myRoutes = [

{path:"",component:testCollect},

{path:"/myColllect",component:testCollect},

{path:"/myDetail",component:testDetail},

{path:"/myOrder",component:testOrder},

]

const myRouter = new VueRouter({

routes:myRoutes

})

new Vue({

router:myRouter,

el:"#container",

data:{

msg:"Hello VueJs"

}

})

相关推荐：