异步路由的原理

和异步组件一样，异步路由只有在我们需要这个路由的时候才会去加载
当我们访问到这个路由的时候，会执行路由所对应的component，component所对应的是一个函数，写成一个函数就意味着只有在函数执行时，才会加载这个路由，这样就实现了异步加载

异步路由的实现

{
    path:"/home",
    component:()=>import("../pages/Home.vue")
},

只要把component写成一个函数，就可以实现异步加载，我们先看一下打包时的分包，运行npm run build

名称.png 但是此时的分包名称看不出来是哪个包啊

webpack有个解决方案

魔法注释

我们只需要在import后面加上一个固定语句

/* webpackChunkName:"home-hunk" */

这样我们的包名称就会变成home-hunk

试一下

成功分包，这样加载就会只加载固定的包

匹配notFonunt Page

说的有点少，多说点

这个就是说如果没有路由能匹配上，就用这个路由

path:"/:pathMatch(.*)" 解析成字符串
path:"/:pathMatch(.)" 解析成数组我们只需要把path改成这样就好了，path:"/:pathMatch(.)" 会将链接解析成字符串，path:"/:pathMatch(.)*"会将连接解析成数组

只要设置这个，如果用户乱输入，就会匹配到这个路由，尝试一下

当输入hom时，匹配到了notFount页面

同时我们可以拿到此时url

通过$route.params.pathMatch

<div>
  NOT FOUNT PAGE
  {{$route.params.pathMatch}}
</div>

页面已经展示，如果想在setup语法糖中拿到，需要用的vue提供的hooks useRoute

import { useRoute } from "vue-router"
export default {
    setup() {
        const route = useRoute()
        console.log(route.params.pathMatch);
    }
}

此时的界面

结束

今天就稍微说一下，状态不好

Vue3异步路由，webpack魔法注释

异步路由的原理

异步路由的实现

魔法注释

匹配notFonunt Page

结束