Vue3.0 简单商城—购物主页组件编写

这篇文章简单编写一下主页功能。

主页功能主要有一个导航栏构成，导航栏通过路由跳转的方式分别跳转到“商品列表”、“购物车”、“咨询列表”、“个人信息”等不同的组件。

1.创建Home组件

基础代码参考如下：

<template>
  <div>
    <Header></Header>
  </div>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1">商品列表</el-menu-item>
      <el-menu-item index="2">购物车</el-menu-item>
      <el-menu-item index="3">资讯信息</el-menu-item>
      <el-menu-item index="4">我的信息</el-menu-item>
    </el-menu>
  </div>

  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "../components/Header.vue";

export default {
  name: "index",
  data() {
    return {};
  },
  components: {
    Header,
  },
  methods: {},
};
</script>

<style  >
</style>

在路由信息中引入home组件

基础效果如下：

2.修改Home组件逻辑

el-menu组件跳转的方式有两种，一种是 通过 router进行跳转，比如下面这样：

<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
text-color="#fff"
router
:default-active="$route.path"
>
<el-menu-item index="/home/list">
  <el-icon><icon-menu /></el-icon>
  <span>文章管理</span>
</el-menu-item>
<el-menu-item index="/home/Art">
  <el-icon><discount /></el-icon>
  <span>文章分类</span>
</el-menu-item>
</el-menu>

另外一种就是在item中加入click事件，比如这样：

  <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1" @click="goto(1)">商品列表</el-menu-item>
      <el-menu-item index="2" @click="goto(2)">购物车</el-menu-item>
      <el-menu-item index="3" @click="goto(3)">资讯信息</el-menu-item>
      <el-menu-item index="4" @click="goto(4)">我的信息</el-menu-item>
    </el-menu>

我们采用第一种方法：

<template>
  <div>
    <Header></Header>
  </div>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="list">商品列表</el-menu-item>
      <el-menu-item index="car">购物车</el-menu-item>
      <el-menu-item index="info">资讯信息</el-menu-item>
      <el-menu-item index="myInfo">我的信息</el-menu-item>
    </el-menu>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";

export default {
  name: "index",
  data() {
    return {};
  },
  components: {
    Header,
  },
  methods: {
    goto(e) {
      console.log(e);
    },
  },
};
</script>

<style>
</style>

3.修改路由信息

我们打开route文件夹地下的 index.js 文件

import { createRouter, createWebHistory } from 'vue-router';

import index from '../components/index.vue'
import login from '../components/Login2.vue'
import home from '../components/Home.vue'
import list from '../components/Home/List.vue'
import car from '../components/Home/Car.vue'
import info from '../components/Home/Info.vue'
import myInfo from '../components/Home/MyInfo.vue'

// 定义路由
const routes = [
    {
        path: '/',
        name: 'index',
        component: index,
    },
    {
        path: '/login',
        name: 'login',
        component: login,
    },
    {
        path: "/home",
        component: home,
        children: [
            {
                path: "list",  //商品信息
                component: list
            },
            {
                path:"car",  //购物车
                component:car,
            },
            {
                path:'info',  //咨询信息
                component:info
            },
            {
                path:'myinfo',  //个人信息
                component:myInfo 
            },
        ]
    }
];

// 创建router实例
const router = createRouter({
    history: createWebHistory(),
    routes,
});
//对外暴露路由器
export default router

效果如下：