路由----商品列表转详情

列表`

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> --> 
    <h2>
      商品列表
    </h2>
    <ul clas="item-list">
      <li class="head">
        <span>名称</span>
        <span>价格</span>
        <span>操作</span>

      </li>
      <li v-for="item of list" :key="item.id">
        <span>
          <router-link :to="{name:'items',params:{itemId:item.id}}">{{item.name}}</router-link>
        </span>
        <span>
          {{item.price}}
        </span>
        <span>
          <button>删除</button>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data(){
    return{
      list:[],
    }
  },
  created(){
    this.axios({
      url:'/api/items'
    }).then(({data})=>{
      this.list=data
       console.log(this.list); 
    });
  },
  components: {
    // HelloWorld
  },
}
</script>
<style>
ul{
  margin:0;
  padding:0;
}
li{
  list-style:none;
  width:510px;
  height:30px;
   display:flex;
  border-bottom:1px solid #333;
}

.item-list{
  padding:10px;
  /* display:flex; */
  justify-content:space-between;
  height:30px;
  line-height:30px;
  /* border-bottom:1px solid #333; */
}
.item-list li.head{
  font-weight:bold;
}
.item-list li span{
  min-width:200px;
}
span{
  width:200px;
  height:30px;
  line-height:30px;
}
</style>

详情

<template>
    <div>
        <div v-if="item">
            <h2>商品详情</h2>
            <dt>ID</dt>
            <dd>{{item.id}}</dd>
            <dt>名称</dt>
            <dd>{{item.name}}</dd>
            <dt>价格</dt>
            <dd>{{item.price | RMB}}</dd>
        </div>
        <div v-else>
            <h2>请稍后,暂时没有商品信息</h2>
        </div>
    </div>
</template>
<script>
import RMB from '@/filters/RMB.js'
export default{
    name:'items',
    data(){
        return{
            item:false
        }
    },
    filters:{
        RMB
    },
    mounted(){
        //获取路由参数(也就是得到要显示那组数据
        // console.log(typeof this.$route.params.itemId)
        let itemId=this.$route.params.itemId;
        if(itemId){
            this.axios({
                url:`/api/item/${itemId}`,
            }).then(res=>{
                console.log(res);
                this.item=res.data

            });
        }
    },
}
</script>
<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.axios=axios;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

自定义个插件

export default val=>{
    return '￥'+(val/100).toFixed(2);
}

vue.config.js解决跨域
const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy:{
‘/api’:{
target:“http://localhost:7777”,
pathRewrite:{
‘^/api’:‘’
}
}
}
}
})
路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/items/:itemId',
    name:'items',
    component:()=>import('@/views/items.vue') 
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

列表效果图

详情效果图

**