Dieser Artikel stellt hauptsächlich die relevanten Informationen zur SPA-Einzelseitenanwendung im Detail vor. Ich hoffe, dass er für alle hilfreich ist.
1. Übersicht über SPA
SPA (Einzelseitenanwendung): In einer fertigen Anwendung oder Website gibt es nur eine vollständige HTML-Seite , diese Seite verfügt über einen Container und die zu ladenden Codefragmente können in den Container eingefügt werden.
So funktioniert SPA:
zB: http://127.0.0.1/index.html#/start
①Parsen Sie die gesamte Seite gemäß der URL in der Adressleiste: index.html
Laden Sie index.html
②Parsen Sie die Routing-Adresse nach # gemäß der URL in der Adressleiste: start
Gehen Sie entsprechend der Routenadresse zum Konfigurationsobjekt der Routing-Adresse in der aktuellen Anwendungskonfiguration, um die Seitenadresse der Vorlage zu finden, die der Routing-Adresse entspricht
Initiieren Sie eine asynchrone Anforderung zum Laden der Seitenadresse
③Stellen Sie die Anforderung ein. Laden Sie die eingehenden Daten in den angegebenen Container.
2. Grundlegende Schritte zum Implementieren eines SPA über VueRouter
①Führen Sie das entsprechende ein vue-router.js (Ich habe diese Datei in meine Dateien hochgeladen)
②Geben Sie einen Container für Codeausschnitte an
<router-view></router-view>
③Erstellen Sie, was das Unternehmen benötigt Jede Komponente von
④ Konfigurations-Routing-Wörterbuch
Konfigurationsobjekt jeder Routing-Adresse (welche Seite geladen werden soll...)
const myRoutes = [ {path:'/myLogin',component:TestLogin}, {path:'/myRegister',component:TestRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter })
⑤Test
Geben Sie die entsprechenden unterschiedlichen Routing-Adressen in die Adressleiste ein, um zu bestätigen, ob der entsprechende
{{msg}}
<router-view></router-view> <script> var testLogin = Vue.component("login",{ template:` <p> <h1>这是我的登录页面</h1> </p> ` }) var testRegister = Vue.component("register",{ template:` <p> <h1>这是我的注册页面</h1> </p> ` }) //配置路由词典 //对象数组 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>
SPA练习
{{msg}}
<router-view></router-view> <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:` <p> <h1>这是收藏页</h1> </p> ` }) var testDetail = Vue.component("detail",{ template:` <p> <h1>这是详情页</h1> </p> ` }) var testOrder = Vue.component("order",{ template:` <p> <h1>这是订单页</h1> </p> ` }) 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>
Verwandte Empfehlungen:
Ein einfaches Verständnis, wie man den Webseitentitel für eine einzelne Seite in vue2 festlegt
Informationen dazu Betreiben Sie Vue.js. Beispielanalyse für mehrere Routingbereiche auf einer Seite
H5-Prinzip zum Wechseln des Bildschirms mit einer Geste auf einer Seite
Das obige ist der detaillierte Inhalt vonBeispiele für SPA-Einzelseitenanwendungen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!