前言
实战已经开始了!上一篇文章将首页中的店铺列表数据动态化了,也是为了详情页而做准备的,从本章节起就要开始做详情页了,但是随着页面路由越来越多,在做详情页之前,需要将路由变为异步加载。其次首页列表和详情页顶部部分是一样的,所以将其组件化。
详情页路由 - 异步路由
🌀 既然要做详情页了,就得先创建页面,在配置路由。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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?)]
- 通过页面加载可以看出,进入首页时会单独加载首页配置路由,进入登录页