03. 路由懒加载

前面我们提到过，如果项目的业务逻辑很多，组件很多，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就能提高首屏的渲染效率；

其实这里还是我们前面讲到过的webpack的分包知识，而Vue Router默认就支持动态来导入组件：

这是因为component可以传入一个组件，也可以接收一个函数，该函数 需要返回一个Promise；

使用import导入，打包时会进行分包处理。

04. 其他属性

name属性：路由记录独一无二的名称；

meta属性：自定义的数据

05. 动态路由

很多时候我们需要将给定匹配模式的路由映射到同一个组件，

例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的ID是不同的，

在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数。

在router-link中进行如下跳转：

如果在子组件中，需要用到路由中传递的值，可以通过$route.params.id来获取。

06. NotFound

对于那些没有匹配到的路由，我们通常会将之匹配到固定的某个页面 --> NotFount页面。

{
    // abc/cba/nba
    // path: "/:pathMatch(.*)*", // 这种写法会对路径进行解析，返回数组。
     path: "/:pathMatch(.*)",
    component: () => import("../Views/NotFound.vue")
}

我们可以通过 $route.params.pathMatch 获取传入的参数：

<template>
  <div class="not-found">
    <h2>NotFound: 您当前的路径{{ $route.params.pathMatch }}不正确, 请输入正确的路径!</h2>
  </div>
</template>

<script setup>
</script>

<style scoped>

  .not-found {
    color: red;
  }

</style>

07. 编程式导航

前面我们都是通过<router-link>进行路由跳转。

但有时候，我们也需要使用其他标签，比如span标签、button标签，来进行路由跳转。

应该怎么实现呢？需要通过事件来进行。

这种方式称之为“编程式导航”。

<template>
  <div class="app">
    <div class="nav">
      <router-link to="/home" replace>首页</router-link>
      <router-link to="/about" replace active-class="active">关于</router-link>

      <!-- 其他元素跳转 -->
      <span @click="homeSpanClick">首页</span>
      <button @click="aboutBtnClick">关于</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
    import { useRouter } from 'vue-router'

    const router = useRouter()

    // 监听元素的点击
    function homeSpanClick() {
        // 跳转到【首页】
        // router.push("/home")  // 简单写法
        router.push({
            // name: "home"
            path: "/home"
        })
    }
    function aboutBtnClick() {
        // 跳转到【关于】
        router.push({
            path: "/about",
            query: {
                name: "why",
                age: 18
            }
        })
    }

</script>

某些页面中，我们也会添加【返回】，或【向前】按钮。

让用户根据自己的浏览路径，实现向前跳转与向后跳转。

实现方法同样是拿到router对象。

• router.back()：向后跳转
• router.forward()：向前跳转
• go(delta)：delta为跳转步数。正数表示向前跳转；负数表示向后跳转。

<script setup>
    import { useRouter } from 'vue-router'

    const router = useRouter()

    function backBtnClick() {
        // router.back()
        // router.forward()

        // go(delta)
        // go(1) -> forward()
        // go(-1) -> back()
        router.go(-1)
    }

</script>