案例实战

1. 创建项目

npm create vite@latest 0410-vue3-vuex-project

我们这个项目会用 vite2.8 + Vue3.2 + Router4 + Vuex4 + TypeScript4.6 + Element-Plus + axios

2. 安装依赖

npm install vue-router@4
npm install vuex@next
npm install axios
npm install element-plus
npm install less less-loader -D

3. 配置路由

src/router/index.ts

import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue')
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router

根组件

在根组件中添加路由视口。

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

布局组件

Layout.vue

src/views/Layout.vue

<template>
    <!-- 导航组件 -->
    <!-- 导航对应的内容组件 -->
    <router-view></router-view>
</template>

<script setup lang="ts">
import {ref} from 'vue'

</script>

<style scoped>

</style>

配置Layout的路由

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/layout',
        name: 'Layout',
        component: () => import('../views/Layout.vue')
    }
]

首页组件

src/views/Home.vue

<template>
    <div>首页</div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

配置路由

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Layout',
        component: () => import('../views/Layout.vue'),
        children: [
            {
                path: 'home',
                name: 'Home',
                component: () => import('../views/Home.vue')
            },
        ]
    }
]

新闻组件

src/views/News.vue

<template>
    <div>新闻</div>
</template>

<script setup lang="ts">
</script>

<style scoped>

</style>

配置路由

        {
            path: 'news',
            component: () => import('../views/News.vue')
        },

关于我们

src/views/About.vue

<template>
    <div>关于我们</div>
</template>

<script setup lang="ts">
</script>

<style scoped>

</style>

配置路由：

        {
            path: 'about',
            component: () => import('../views/About.vue')
        },

登录组件

src/views/Login.vue

<template>
    <div>登录</div>
</template>

<script setup lang="ts">
</script>

<style scoped>

</style>

配置路由

    {
        path: '/login',
        component: () => import('../views/Login.vue')
    }

顶部组件

src/components/Header.vue

<template>
    菜单
</template>

<script setup lang="ts">
</script>

<style scoped>

</style>

使用这个组件，在 Layout.vue 中引入：

<template>
    <!-- 导航组件 -->
    <Header></Header>
    <!-- 导航对应的内容组件 -->
    <router-view></router-view>
</template>

<script setup lang="ts">
import Header from '../components/Header.vue'

</script>

挂载路由

在 main.ts 文件中挂载路由

import router from './router'
App.use(router).mount('#app')