vue-router 路由嵌套

最新推荐文章于 2024-05-26 12:44:14 发布

Dev _

最新推荐文章于 2024-05-26 12:44:14 发布

阅读量160

点赞数

分类专栏： vue-router

wushen

本文链接：https://blog.csdn.net/qq_44317018/article/details/105659193

版权

vue-router 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

//http://localhost:8080/#/home/news
{   
	path:'/home',  
	component:Home,   
	children:[
    {
      path:'news', // 此处不加'/'
      component:HomeNews,
    }  
     ] 
}

配置嵌套路由

{
    path:'/about',      //一级路由
    component:About,
    children:[          
      {                      //二级路由
        path:'/',            //二级的默认路由（此path指向上一级，即path:'/about'）
        name:'expressLink',        
        component:Express      
      },
      {
        path:'/about/guide',
        name:'guideLink',
        component:Guide
      },
      {
        path:'/about/contact',
        name:'contactLink',
        component:Contact,
        children:[            
          {                                     //三级路由
            path:'/about/contact/personName',
            name:'personNameLink',
            component:PersonName,
          },
          {
            path:'/about/contact/phone',
            name:'phoneLink',
            component:Phone
          },
 
        ]
      }
    ]
  },