015 嵌套路由配置

路由嵌套是非常常见的需求

第一步：创建子路由要加载显示的页面

第二步

{

    path:"/news",

    name:"news",

    redirect:"/news/baidu",

    component:() => import("../views/NewsView.vue"),

    children:[

        {

            path:"baidu",

            component:() => import("../views/NewsList/BaiduNews.vue"),

        },

        {

            path:"wangyi",

            component:() => import("../views/NewsList/WangyiNews.vue"),

        }

    ]

}

 

第三步：指定子路由显示位置 <router - view></router - view>

第四步：添加子路由跳转链接

 

<router - link to="/news/baidu">百度新闻</router - link> |

<router - link to="/news/wangyi">网易新闻</router - link>

 

第五步：重定向配置 redirect:"/news/baidu"