Méthode d'implémentation du SPA imbriqué de routage de vue-js tutoriel-php.cn

Méthode d'implémentation du SPA imbriqué de routage de vue

php中世界最好的语言

Libérer： 2018-05-18 10:44:21

original

1414 Les gens l'ont consulté

Cette fois, je vais vous présenter la méthode d'implémentation du SPA imbriqué vuerouting Quelles sont les précautions pour implémenter le SPA imbriqué du routage vue. Ce qui suit est un cas pratique. . Jetons un coup d'oeil.

Cet article partage avec vous les étapes de mise en œuvre du routage SPA imbriqué :

Un composant (/a) doit imbriquer le composant B (/b) et le composant C (/c)

① Préparez-vous à imbriquer les composants parents d'autres groupes et spécifiez un conteneur

Spécifiez un conteneur dans le composant A

<router-view></router-ivew>

Copier après la connexion

②Spécifiez l'attribut children

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

Copier après la connexion

dans la configuration de routage

objet du composant A. Supplément :

//Si le nombre dépasse le nombre d'enregistrements, cela ne fonctionnera pas.
this.$router.go(num);
Si num est un nombre positif, avancez
Si num est un nombre négatif, reculez

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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!