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

文章目录

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

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

1、 配置路由规则

使用children配置项：

[
      {
         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、测试效果