suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Implementierungsschritte für verschachtelte Vue-Routing-SPAs

Detaillierte Erläuterung der Implementierungsschritte für verschachtelte Vue-Routing-SPAs

小云云
小云云Original
2017-12-26 14:10:531939Durchsuche

Dieser Artikel stellt hauptsächlich die SPA-Implementierungsschritte der Vue-Routing-Verschachtelung im Detail vor. Interessierte Freunde können darauf verweisen.

In diesem Artikel erfahren Sie, wie Sie das Routing verschachtelter SPA implementieren:

A-Komponente (/a) muss B-Komponente (/b) und C-Komponente (/c) verschachteln

①Bereiten Sie die Verschachtelung der übergeordneten Komponente anderer Komponenten vor, um einen Container anzugeben

Geben Sie einen Container in der A-Komponente an
975b587bf85a482ea10b0a28848e78a4

②Geben Sie das Kinderattribut im Routing-Konfigurationsobjekt der A-Komponente

{
Pfad:'/a',
Komponente an : A,
Kinder:[
{Pfad:'/b',Komponente:B},
{Pfad:'/c',Komponente:C},
]
}

Ergänzung:

//Wenn die Anzahl die aufgezeichnete Anzahl überschreitet, funktioniert es nicht.
this.$router.go(num);
Wenn num eine positive Zahl ist, gehen Sie vorwärts
Wenn num eine negative Zahl ist, gehen Sie rückwärts

Code 


<!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>
 <p id="container">
    <p>{{msg}}</p>
    <router-view></router-view>
  </p>
  <script>
//登录组件
    var myLogin = Vue.component("login",{
      template:`
        <p>
          <h1>登录组件</h1>
          <router-link to="/mail">登录</router-link>
        </p>
    `
    })
//  邮箱页面
    var myMail = Vue.component("mail",{
//    定义一个返回的方法
      methods:{
        goBack:function(){
          this.$router.go(-1);
        }
      },
      template:`
        <p>
          <h1>邮箱主页面</h1>
          <ul>
            <li>
              <router-link to="/inbox">收件箱</router-link>
            </li>
            <li>
              <router-link to="/outbox">发件箱</router-link>
            </li>
          </ul>
//        点击按钮返回前面的页面
          <button @click="goBack">返回</button>
          <router-view></router-view>
        </p>
    `
//  指定一个容器,加载收件箱或收件箱的列表
    })
//  收件箱组件
    var myInBox = Vue.component("inbox-component",{
      template:`
        <p>
          <h4>收件箱</h4>
          <ul>
            <li>未读邮件1</li>
            <li>未读邮件2</li>
            <li>未读邮件3</li>
          </ul>
        </p>
    `
    })
//  发件箱组件
    var myOutBox = Vue.component("outbox-component",{
      template:`
        <p>
          <h4>发件箱</h4>
          <ul>
            <li>已发送邮件1</li>
            <li>已发送邮件2</li>
            <li>已发送邮件3</li>
          </ul>
        </p>
    `
    })
    //配置路由词典
    new Vue({
      router:new VueRouter({
        routes:[
          {path:&#39;&#39;,redirect:&#39;/login&#39;},
          {path:&#39;/login&#39;,component:myLogin},
          {path:&#39;/mail&#39;,component:myMail,children:[
            {path:&#39;/inbox&#39;,component:myInBox},
            {path:&#39;/outbox&#39;,component:myOutBox}
        ]},
        ]
      }),
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
    //通过再次指定一个<router-view></router-view>和children:[]
  </script>
 </body>
</html>

Verwandte Empfehlungen:

Detailliertes Beispiel für die SPA-Einzelseitenanwendung in Vue

Ein Beispiel-Tutorial, das Vue-Routing-Jump-Probleme zusammenfasst

Detaillierte Beispiele für Vue-Routing-Hooks und Anwendungsszenarien

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierungsschritte für verschachtelte Vue-Routing-SPAs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detailliertes Beispiel für die Implementierung eines Ratespiels basierend auf Vue-KomponentenNächster Artikel：Detailliertes Beispiel für die Implementierung eines Ratespiels basierend auf Vue-Komponenten

In Verbindung stehende Artikel

Mehr sehen