vue中SPA单页面应用程序详解
程序员文章站
2022-04-16 12:29:34
一、spa的概述
spa(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以...
一、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(该文件我已经上传到我的文件中)
②指定一个盛放代码片段的容器
<router-view></router-view>
③创建业务所需要的各个组件
④配置路由词典
每一个路由地址的配置对象(要加载哪个页面...)
const myroutes = [ {path:'/mylogin',component:testlogin}, {path:'/myregister',component:testregister} ] const myrouter = new vuerouter({ routes:myroutes }) new vue({ router:myrouter })
⑤测试
在地址栏中 输入对应的不同的路由地址 确认是否能够加载对应的<!doctype html>
<html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </div> <script> var testlogin = vue.component("login",{ template:` <div> <h1>这是我的登录页面</h1> </div> ` }) var testregister = vue.component("register",{ template:` <div> <h1>这是我的注册页面</h1> </div> ` }) //配置路由词典 //对象数组 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" } }) </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>spa练习</title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <router-view></router-view> </div> <script> /* 需要大家创建一个spa,这个spa有3个组件,分别对应的是collect/detail/order 功能需求: 在地址栏中路由地址是: /mycolllect --> 收藏页组件 /mydetail --> 详情页组件 /myorder --> 订单页组件 */ /* 1、引入js文件 2、创建三个组件,需要返回值 3、路由词典配置(三小步)const myroutes、const myrouter、router:myrouter, 4、指定一个盛放代码片段的容器 <router-view></router-view> */ var testcollect = vue.component("collect",{ template:` <div> <h1>这是收藏页</h1> </div> ` }) var testdetail = vue.component("detail",{ template:` <div> <h1>这是详情页</h1> </div> ` }) var testorder = vue.component("order",{ template:` <div> <h1>这是订单页</h1> </div> ` }) 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" } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。