Vue学习之--------多级路由的使用（2）（2022/9/5）

文章目录

• 1、 配置路由规则
• 2、跳转（要写完整路径）
• 3、在项目中的实际应用
• 4、测试效果

多级路由的使用、我愿称之为“套娃”。

1、 配置路由规则

使用children配置项：

   routes:[
       {
           path:'/about',
           component:About,
       },
       {
           path:'/home',
           component:Home,
           children:[ //通过children配置子级路由
               {
                   path:'news', //此处一定不要写：/news
                   component:News
               },
               {
                   path:'message',//此处一定不要写：/message
                   component:Message
               }
           ]
       }
   ]

2、跳转（要写完整路径）

<router-link to="/home/news">News</router-link>

3、在项目中的实际应用

4、测试效果