vueルーティングネストSPAの実装方法

今回は、vueroutingネストされたSPAの実装方法と、vue routingネストされたSPAの実装における注意点についてお届けします。実際のケースを見てみましょう。

この記事では、ルーティングのネストされた SPA を実装する手順を共有します:

A (/a) コンポーネントは B コンポーネント (/b) と C コンポーネント (/c) をネストする必要があります

① 他の親コンポーネントをネストする準備をし、コンテナを指定します

Aコンポーネントでコンテナを指定します

<router-view></router-ivew>

②Aコンポーネントのルーティング設定オブジェクトにchildren属性

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

を指定します:

//レコード数を超えると動作しません。
this.$router.go(num);
num が正の数の場合は進みます
num が負の数の場合は後戻りします

コード

ffd43448117c1013fbeeed3f564491ad
100db36a723c770d327fc0aef2ce13b1
 93f0f5c25f18dab9d176bd4f6de5d30e
 a80eb7cbb6fff8b0ff70bae37074b813
 b2386ffb911b14667cb8f0f91ea547a7路由嵌套6e916e0f7d1e588d4f442bf645aedb2f
  1a5245d5109bbd1db7ee93a241be1c412cacc6d41bbb37262a98f745aa00fbf0
  c5db84164be73946241e2787eab8f11f2cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
 208ab46def49e0b0f034dde40adc5640
    e388a4556c0f65e1904146cc1a846bee{{msg}}94b3e26ee717c64999d7867364b1b4a3
    975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e
  94b3e26ee717c64999d7867364b1b4a3
  3f1c4e4b6b16bbbd69b2ee476dc4f83a
//登录组件
    var myLogin = Vue.component("login",{
      template:`
        e388a4556c0f65e1904146cc1a846bee
          4a249f0d628e2318394fd9b75b4636b1登录组件473f0a7621bec819994bb5020d29372a
          5439544d3fddc920749e378b8f06a678登录d625018d6d57dc2163f3a71531b24864
        94b3e26ee717c64999d7867364b1b4a3
    `
    })
//  邮箱页面
    var myMail = Vue.component("mail",{
//    定义一个返回的方法
      methods:{
        goBack:function(){
          this.$router.go(-1);
        }
      },
      template:`
        e388a4556c0f65e1904146cc1a846bee
          4a249f0d628e2318394fd9b75b4636b1邮箱主页面473f0a7621bec819994bb5020d29372a
          ff6d136ddc5fdfeffaf53ff6ee95f185
            25edfb22a4f469ecb59f1190150159c6
              7eda4a77e471d4ed7a59edb55bb9b4f7收件箱d625018d6d57dc2163f3a71531b24864
            bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6
              4d0d9812262c994b1a348e3daf3abaea发件箱d625018d6d57dc2163f3a71531b24864
            bed06894275b65c1ab86501b08a632eb
          929d1f5ca49e04fdcb27f9465b944689
//        点击按钮返回前面的页面
          4d003244892e99ff75c3a224665ef98d返回65281c5ac262bf6d81768915a4a77ac0
          975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e
        94b3e26ee717c64999d7867364b1b4a3
    `
//  指定一个容器,加载收件箱或收件箱的列表
    })
//  收件箱组件
    var myInBox = Vue.component("inbox-component",{
      template:`
        e388a4556c0f65e1904146cc1a846bee
          3f7b3decd2dcafb07b84d2d3985d9f40收件箱0f6dfd1e3624ce5465eb402e300e01ae
          ff6d136ddc5fdfeffaf53ff6ee95f185
            25edfb22a4f469ecb59f1190150159c6未读邮件1bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6未读邮件2bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6未读邮件3bed06894275b65c1ab86501b08a632eb
          929d1f5ca49e04fdcb27f9465b944689
        94b3e26ee717c64999d7867364b1b4a3
    `
    })
//  发件箱组件
    var myOutBox = Vue.component("outbox-component",{
      template:`
        e388a4556c0f65e1904146cc1a846bee
          3f7b3decd2dcafb07b84d2d3985d9f40发件箱0f6dfd1e3624ce5465eb402e300e01ae
          ff6d136ddc5fdfeffaf53ff6ee95f185
            25edfb22a4f469ecb59f1190150159c6已发送邮件1bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6已发送邮件2bed06894275b65c1ab86501b08a632eb
            25edfb22a4f469ecb59f1190150159c6已发送邮件3bed06894275b65c1ab86501b08a632eb
          929d1f5ca49e04fdcb27f9465b944689
        94b3e26ee717c64999d7867364b1b4a3
    `
    })
    //配置路由词典
    new Vue({
      router:new VueRouter({
        routes:[
          {path:'',redirect:'/login'},
          {path:'/login',component:myLogin},
          {path:'/mail',component:myMail,children:[
            {path:'/inbox',component:myInBox},
            {path:'/outbox',component:myOutBox}
        ]},
        ]
      }),
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
    //通过再次指定一个975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e和children:[]
  2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

以上がvueルーティングネストSPAの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。