Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Single-Page-Routings des Vue-Routers
Detaillierte Erläuterung des Single-Page-Routings des Vue-Routers
- 怪我咯Original
- 2017-07-04 15:04:031860Durchsuche
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!