vue动态路由商品详情

动态路由

有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url,
我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
  const routes = [
  {
   
    path: '/',  //主页面
    name: 'Home',
    component: Home
  },
  {
   
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    //详情页面的路由 ，列表页面通过 名称 即可找到详情面
    path:"/item/:itemId(\\d+)", //路径  itemId在上一级定义好后，路由这里接收一下，在子组件里就可以使用了
    //可以通过\\d正则来规范传参的内容       
    name:"item",          //名称
    component:()=>import("../views/item.vue") //组件
  }
]
const router = new VueRouter({
   
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

Home组件

<template>
  <div class="home">
    <!-- <img alt