Verwenden Sie Vue-Router, um die Konvertierung sekundärer Menüinhalte zu realisieren

Sekundäre Menünavigation ist eine sehr häufige Funktion und die meisten Webseiten verfügen über diese Funktion. Wenn es sich um einen gängigen Ansatz handelt, besteht die Möglichkeit darin, die URL zu ändern und zur entsprechenden Seite zu springen.
Wenn Sie Vue verwenden, können Sie mit Vue-Router die Komponenten in ändern, sodass Sie zur entsprechenden „Seite“ springen können, ohne die Seite zu aktualisieren. Tatsächlich hat sich die URL-Adresse immer noch geändert, der Inhalt an anderer Stelle auf der Seite wurde jedoch nicht aktualisiert. Es wurden lediglich die Komponenten in geändert.

html

Bei der Verwendung von Vue.js haben wir die Komponenten bereits in einer Anwendung zusammengefasst. Wenn Sie Vue-Router hinzufügen möchten, müssen Sie nur die Komponenten und die Routenzuordnung konfigurieren Sagen Sie dann, wo der Vue-Router sie rendert.

<div id="app">
 <div class="leftBox">
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <ul>
 <li><router-link to="/" actived>首页</router-link></li>
 <li><router-link to="/article">文章</router-link></li>
 <li><router-link to="/picture">图片</router-link></li>
 <li><router-link to="/music">音乐</router-link></li>
 </ul>
 </div>
 <div class="rightBox">
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
 </div>
</div>

js

Routen definieren. Jede Route sollte eine Komponente abbilden. Wobei „Komponente“ eine Komponente usw. sein kann. Erstellen und mounten Sie die Root-Instanz. Denken Sie daran, Routen über die Router-Konfigurationsparameter einzufügen, damit die gesamte Anwendung über Routing-Funktionen verfügt

var Home = {template: &#39;<div>home</div>&#39;}
 
var router = new VueRouter({
 routes: [
 {path: &#39;/&#39;, component: Home},
 {path: &#39;/picture&#39;, component: Picture},
 {path: &#39;/music&#39;, component: Music},
 {path: &#39;/article&#39;, component: Artlist},
 {path: &#39;/article/:id&#39;, component: Article}
 ]
})
new Vue({
 el: "#app",
 router: router
})

Als ich zum Artikelbereich wechselte, erstellte ich eine weitere Artikelliste und klickte auf den Artikeltitel, um den Artikelinhalt einzugeben .

Ich habe die Daten hier fest codiert, aber ich kann die Datenzuordnung tatsächlich über Ajax erhalten.

Ich habe das Laden simuliert ... und basierend auf datengesteuertem Denken habe ich v-if="loading" verwendet, um zu bestimmen, ob dieses Laden auftritt.

Denken Sie daran, unterschiedliche Tasten für die Animationsumschaltung anzugeben, da dies sonst keine Wirkung hat.

Beim Erstellen und Ändern von Routen müssen Sie die URL-Parameter an eine Methode übergeben, um die Daten abzurufen. Hier müssen Sie „$route“ erstellen und überwachen.

Rufen Sie die URL-Parameter über $route ab .params oder $route.query usw. Weitere Informationen finden Sie im Tutorial

Um zur vorherigen Ebene zurückzukehren, verwenden Sie router.go(-1), was dem Drücken der Zurück-Taste

var Article = {
 template: &#39;<div class="post">\
 <div class="loading" v-if="loading">loading.....</div>\
 <transition name="slide">\
 <div v-if="post" class="content" :key="post.id">\
 <button @click="back">返回</button>\
 <p>{{post.title}}</p>\
 <P>{{post.body}}</P>\
 </div>\
 </transition>\
 </div>&#39;,
 data: function() {
 return {
 loading: false,
 error: null,
 post: null
 }
 },
 created:function() {
 this.fetchData();
 },
 watch: {
 &#39;$route&#39;: &#39;fetchData&#39;
 },
 methods: {
 fetchData:function () {
 this.error = this.post = null;
 this.loading = true;
 getPost(this.$route.params.id,(err,post) => {
 this.loading = false;
 if(err) {
 this.error = err.toString();
 }else {
 this.post = post
 }
 })
 },
 back: function() {
 router.go(-1);
 }
 }
}