【www.bbyears.com--其它】

本文为大家分享了路由嵌套的SPA实现的步骤：

A（/a）组件需要嵌套B组件(/b)和C组件(/c)

①准备嵌套其它组价的父组件 指定一个容器

在A组件指定一个容器

②在A组件的路由配置对象中指定children属性

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

补充：

//数字如果超出记录的次数，是不行的。
this.$router.go(num);
如果num是正数，向前进
如果num是负数，向后退

代码

 
 
 
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 
 
 
    
{{msg}}
    
  
  <script>
//登录组件
    var myLogin = Vue.component("login",{
      template:`
        
          
登录组件
          登录
        
    `
    })
//  邮箱页面
    var myMail = Vue.component("mail",{
//    定义一个返回的方法
      methods:{
        goBack:function(){
          this.$router.go(-1);
        }
      },
      template:`
        
          
邮箱主页面
          
            
              收件箱
            
            
              发件箱
            
          
//        点击按钮返回前面的页面
          返回
          
        
    `
//  指定一个容器,加载收件箱或收件箱的列表
    })
//  收件箱组件
    var myInBox = Vue.component("inbox-component",{
      template:`
        
          
收件箱
          
            未读邮件1
            未读邮件2
            未读邮件3
          
        
    `
    })
//  发件箱组件
    var myOutBox = Vue.component("outbox-component",{
      template:`
        
          
发件箱
          
            已发送邮件1
            已发送邮件2
            已发送邮件3
          
        
    `
    })
    //配置路由词典
    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"
      }
    })
    //通过再次指定一个和children:[]
  </script>
 

本文来源：http://www.bbyears.com/luyouqishezhi/141374.html