路由回退

使用 back 方法回到上一页

  1. const router = useRouter()
  2. const goBack = () => {
  3.   router.back()
  4. }

路由传参

实现点击商店信息跳转到商店详情页

修改商店详情页的路由，添加id

  1. {
  2.   path: '/shop/:id',
  3.   name: 'Shop',
  4.   component: () => import(/* webpackChunkName: "shop" */ '@/views/Shop.vue'),
  5. },

router-link跳转时传入id

  1. <router-link :to="`/shop/${info._id}`" v-for="info in nearbyList" :key="info._id">
  2.   <ShopInfo :info="info"  />
  3. </router-link>

使用 useRoute 获得 route，通过 route 获取 params
获取参数后，向端口 /api/shop/:id 发起请求，获得商店详情数据

  1. const route = useRoute()
  2. const shopInfo = ref({})
  3. const getShopInfo = async () => {
  4.   const result = await get(`/api/shop/${route.params.id}`)
  5.   shopInfo.value = result.data.shopInfo
  6. }
  7. getShopInfo()

mock Restful数据

fastmock当接口为 /api/shop/:id 时, 通过 _req.params.id 获取路由参数

  1. {
  2.   "code": "0000",
  3.   "data": {
  4.     "shopInfo": function({_req, Mock}) {
  5.       let id = _req.params.id;
  6.       if (id === "1") {
  7.         return  {
  8.           "_id": "1",
  9.           "name": "沃尔玛",
  10.           "imgUrl": "https://img.ixintu.com/download/jpg/20201225/240f349847fc4942a955c02def66a158_512_512.jpg!bg",
  11.           "sales": "10000",
  12.           "expressLimit": "0",
  13.           "expressPrice": "5",
  14.           "slogan": "VIP尊享满89减4元运费券"
  15.        } 
  16.       } else if (id === "2") {
  17.         return  {
  18.           "_id": "2",
  19.           "name": "山姆会员店",
  20.           "imgUrl": "https://trgccw5gap-flywheel.netdna-ssl.com/wp-content/uploads/2011/11/Sams-Club-Logo.jpg",
  21.           "sales": "10000",
  22.           "expressLimit": "0",
  23.           "expressPrice": "5",
  24.           "slogan": "VIP尊享满89减4元运费券"
  25.         }
  26.       } else {
  27.         return null
  28.       }
  29.     }
  30.   },
  31.   "desc": "成功"
  32. }

解决图片撕裂问题

因为图片还未加载就渲染了组件，导致图片显示撕裂状态，使用 v-if 或者 v-show 可解决

  1. <shopInfo :info="shopInfo" v-show="shopInfo.imgUrl"/>