vue中路由的嵌套及懒加载

最新推荐文章于 2021-12-06 21:22:02 发布

前端神棍

最新推荐文章于 2021-12-06 21:22:02 发布

阅读量191

点赞数

文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/m0_46412825/article/details/110834210

版权

本文介绍了如何在React应用中使用懒加载技术，通过`path`重定向和`import()`函数，实现在`/home`下按需加载`News`和`Shop`组件。详细讲解了如何避免使用可能导致路径误解的写法，并展示了如何组织路由结构以提高性能。

摘要由CSDN通过智能技术生成

export default new Router({
    mode:"hash",
    routes:[
        {path:"/",redirect:"/home"},
        {
            path:"/home",
            name:"home",
            component:Home,
            children:[
                /*{path:"/home",redirect:"/home/news"},
                {path:"/home/news",name:"news",component:News},
                {path:"/home/shop",name:"shop",component:Shop},*/

                /* path不能这样写：/news   /表示根  所以在写路由的时候要么带/把路径写全，要么不带/ */
                {path:"/home",redirect:"/home/news"},
                // 叫路由的懒加载（当路径匹配到了，才去加载组件）component:()=>import("../views/News")
                {path:"news",name:"news",component:()=>import("../views/News")},
                {path:"shop",name:"shop",component:()=>import("../views/Shop")},
            ]
        },
        {path:"/about",name:"about",component:About},
        {path:"/mine",name:"mine",component:Mine},
    ]
})