vue3.2 电商前台项目（二）—— 路由组件和非路由组件

一、非路由组件和路由组件

1. 非路由组件

• 非路由文件存放在 components 文件夹下

• 非路由组件包含：Header【首页、登录、注册、搜索】、Footer【首页、搜索页】

• 非路由组件的使用步骤

1. 创建组件
2. 引入
3. 使用

1. 新建 src / components / Header / index.vue
2. 新建 src / components / Footer / index.vue
3. App.vue 中引入和使用

<template>
  <!-- 头部组件 -->
  <Header></Header>
  <!-- 底部组件 -->
  <Footer></Footer>
</template>
<script setup>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
</script>
<style lang="scss"></style>

2. 路由组件

Home首页路由、Search搜索路由、Login登录路由、Refister注册路由

• 路由组件存放在 src / views 文件夹下

1. 配置路由

• src / router / index.js

import {
   
    createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  // 重定向：运行项目时，立即定位到首页，而不是 /
  {
   
   
    path: '/',
    redirect: '/home'
  }, {
   
   
    path: '/home',
    component: () => import('@/views/Home')
  }, {
   
   
    path: '/search',
    component: () => import('@/views/Search')
  }, {
   
   
    path: '/login',
    component: () => import('@/views/Login')
  }, {
   
   
    path: '/register',
    component: () => import('@/views/Register')
  }
]

const router = createRouter({
   
   
  history: createWebHashHistory(),
  routes
})

export default router

2. 引入和注册

• vue3 在创建的时候如果选择安装路由，则会在 main.js 自动引入和注册
• 如果没有在创建项目时安装，则需要手动安装 vue-router，再在 main.js 中引入和注册

main.js

import {
   
    createApp } from 'vue'