路由传值的VUE案例

mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vant from 'vant';
import 'vant/lib/index.css';


axios.defaults.baseURL  = 'http://www.liulongbin.top:3005';
Vue.use(ElementUI)
Vue.prototype.$http = axios
Vue.use(Vant);
Vue.config.productionTip = false

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

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/index'
  },
  {
    path: '/index',
    name: 'indexView',
    component: () => import('../views/index.vue'),
    children: [
      {
        path: '/',
        redirect: '/tag'
      },
      {
        path: '/tag',
        component: () => import('../views/tag.vue'),
      },
      {
        name: 'minute',
        path: '/minute/',
        component: () => import('../views/minute.vue')
      },

      {
        path: '/new',
        name: 'newView',
        component: () => import('../views/new.vue'),
      }
    ]
  },
]

const router = new VueRouter({
  routes
})

export default router

Vuex配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

组件 

首页.vue

<template>
  <div>
    <router-view></router-view>
    <div class="box">
      <van-tabbar v-model="active">
        <van-tabbar-item to="/tag" name="home" icon="home-o"
          >商品信息</van-tabbar-item
        >
        <van-tabbar-item to="/new" name="search" icon="search">新品</van-tabbar-item>
        <van-tabbar-item name="friends" icon="friends-o"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="setting" icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexView",
  data() {
    return {
      active: "home",
    };
  },
};
</script>

<style>
.box {
  height: 50px;
}
</style>

tag.vue    商品信息展示的组件

<template>
  <div>
    <van-card
      v-for="item in goods"
      :key="item.id"
      num="1"
      :price="item.sell_price"
      :origin-price="item.market_price"
      :desc="item.zhaiyao"
      :title="item.title"
      :thumb="item.img_url"
    >
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button @click="minute(item.id)" size="mini">详细</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  name: "tagView",
  data() {
    return {
      goods: [],
    };
  },
  methods: {
    minute(id) {
      // console.log(id);
      // this.$router.push("minute/" + id);
      this.$router.push({ name: "minute", params: { id } });
      // console.log(this.goods);
    },
  },
  async created() {
    var res = await this.$http.get("/api/getgoods?pageindex=1");
    this.goods = res.data.message;
  },
};
</script>

<style>
</style>

minute.vue     单个商品 购买及总价信息

<template>
  <div>
    <van-nav-bar
      title="商品信息"
      left-text="返回"
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!--  -->
    <van-notice-bar left-icon="volume-o" :text="info.title" />
    <van-card
      :price="info.sell_price"
      :origin-price="info.market_price"
      :title="info.title"
      :thumb="info.img_url"
    >
      <template #tags> </template>
      <template #footer>
        <van-stepper @change="change" v-model="value" />
      </template>
    </van-card>
    <van-submit-bar :price="price" @click="submit" button-text="提交订单" />
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
export default {
  name: "minuteView",
  // props: ["id"],
  data() {
    return {
      price: 0,
      info: {},
      value: 0,
    };
  },
  methods: {
    submit() {},
    change() {
      this.price = this.value * this.info.sell_price * 100;
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {},
    minute() {
      console.log(this);

      this.$http
        .get("/api/goods/getinfo/" + this.$route.params.id)
        .then((response) => {
          console.log(response);

          this.info = response.data.message[0];
          this.price = this.value * this.info.sell_price * 100;
        });
    },
  },
  created() {
    this.minute();
  },
};
</script>

<style>
</style>

其他相关组件自行配置,以上只是单个页面的简单展示