Implementierungsmethode für verschachteltes Vue-Routing SPA-js-Tutorial-php.cn

Implementierungsmethode für verschachteltes Vue-Routing SPA

php中世界最好的语言

Freigeben： 2018-05-18 10:44:21

Original

1452 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Implementierungsmethode von VueRouting Nested SPA vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung von Vue Routing Nested SPA? . Werfen wir einen Blick darauf.

In diesem Artikel erfahren Sie, wie Sie Routing-verschachtelte SPA implementieren:

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

① Bereiten Sie die Verschachtelung übergeordneter Komponenten anderer Gruppen vor und geben Sie einen Container

an Geben Sie einen Container in der A-Komponente an

<router-view></router-ivew>

Nach dem Login kopieren

②Geben Sie das untergeordnete-Attribut

{ 
path:&#39;/a&#39;,
component:A,
children:[
{path:&#39;/b&#39;,component:B},
{path:&#39;/c&#39;,component:C},
]
}

Nach dem Login kopieren

im Routing-Konfigurations-

-Objekt der Komponente A an. Ergänzung:

//Wenn die Anzahl die Anzahl der Datensätze ü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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für verschachteltes Vue-Routing SPA. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!