【Vue3从零开始-实战】S13：列表和详情页的异步路由与组件拆分复用

前言

实战已经开始了！上一篇文章将首页中的店铺列表数据动态化了，也是为了详情页而做准备的，从本章节起就要开始做详情页了，但是随着页面路由越来越多，在做详情页之前，需要将路由变为异步加载。其次首页列表和详情页顶部部分是一样的，所以将其组件化。

详情页路由 - 异步路由

🌀 既然要做详情页了，就得先创建页面，在配置路由。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uFBQRt44-1658392881910)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5c02a1622844811b62cad3eb1d52a39~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

• 在views目录下新建shop文件夹 - Shop.vue文件

  • 内容可以是默认的空模板

• 在router配置文件中，引入shop页面，并配置shop路由。

import Shop from '../views/shop/Shop' 

 {
    path: '/shop',
    name: 'Shop',
    component: Shop
} 

😫 目前路由配置中已经有四个路由配置了，在加载首页的时候，也会将其他暂时不需要加载的页面配置一起加载进来，这样其实是没必要的，所以需要将路由配置成异步的。

😲 以前的文章中，一起学习过异步路由配置，下面就简单回顾一下

👉 首先将首页和登录页配置异步路由，看看页面加载时的效果

{
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/home/Home')
},{
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '../views/login/Login'),
    beforeEnter (to, from, next) {
      const { isLogin } = localStorage
      isLogin ? next({ name: 'Home' }) : next()
    }
} 

• component中是一个回调函数，通过import实现异步加载路由。
• webpackChunkName是异步加载路由时，打包的js名称。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BAqPrkSJ-1658392881910)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c05d089f94ff421aac16a1e1725fead5~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]

• 通过页面加载可以看出，进入首页时会单独加载首页配置路由，进入登录页