文章目录
一、非路由组件和路由组件
1. 非路由组件
-
非路由文件存放在 components 文件夹下
-
非路由组件包含:Header【首页、登录、注册、搜索】、Footer【首页、搜索页】
-
非路由组件的使用步骤
- 创建组件
- 引入
- 使用
- 新建 src / components / Header / index.vue
- 新建 src / components / Footer / index.vue
- 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'
import App