In diesem Artikel werden hauptsächlich die relevanten Informationen zum Vue-Router-Einzelseiten-Routing im Detail vorgestellt. Interessierte Freunde können sich auf
vue beziehen Klassenbibliothek namens vue-router, die für das Single-Page-Routing verwendet wird. Das Routing ist im Allgemeinen in vier Schritte unterteilt:
Vorbereiten einer Stammkomponente vue.extend();
Vorbereiten einer Vorlage für den Inhalt, der benötigt wird geroutet werden ;
Route vorbereiten neuer VueRouter();
Zugehörige Routenkarte
Start route start (App,'#box'); // Der erste Parameter ist die vorbereitete Stammkomponente und der zweite Parameter ist der Ort, der in der von Ihnen definierten ID gebündelt werden soll
Vue-Router-Download-Adresse auf Github: https://github.com/vuejs/vue-router
Der einfache Code für den Routensprung lautet wie folgt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue-router.js" ></script> <script type="text/javascript" src="js/vue-resource.js" ></script> <title></title> </head> <body> <p id="box"> <ul> <li> <a v-link="{path:'/home'}">我是第一个a</a> </li> <li > <a v-link="{path:'news'}">我是第二个a</a> </li> </ul> <p> <router-view></router-view> </p> </p> </body> <script> //1.准备一个根组件 var App=Vue.extend(); //2.Home News 组件准备 var Home=Vue.extend({ template:'<h3>我是第一个a的内容页</h3>' }); var News=Vue.extend({ template:'<h3>我是第二个a的内容页</h3>' }) //3.准备路由 var router = new VueRouter(); //4.关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }) //5.启动路由 router.start(App,'#box'); </script> </html>
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Single-Page-Routings des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!