Explication détaillée des étapes de mise en œuvre du SPA imbriqué de routage Vue-js tutoriel-php.cn

Explication détaillée des étapes de mise en œuvre du SPA imbriqué de routage Vue

小云云

Libérer： 2017-12-26 14:10:53

original

1948 Les gens l'ont consulté

Cet article présente principalement en détail les étapes de mise en œuvre du SPA pour l'imbrication du routage de vues. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

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 le composant parent d'autres composants pour spécifier un conteneur

Spécifiez un conteneur dans le composant A

②Spécifiez l'attribut children dans l'objet de configuration de routage du composant A

{
path:'/a',
component : A,
enfants :[
{chemin:'/b',component:B},
{chemin:'/c',component:C},
]
}

Supplément :

//Si le nombre dépasse le nombre enregistré, 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

Recommandations associées :

Exemple détaillé d'application SPA d'une seule page dans vue

Un exemple de tutoriel résumant les problèmes de saut de routage Vue

Exemples détaillés de hooks de routage Vue et de scénarios d'application

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!