手写VUE后台管理系统3 - 整合路由组件 vue-router

---

Vue Router 是 Vue 官方推荐路由组件。

Vue Router 官方文档：https://router.vuejs.org/zh/introduction.html

本文将根据 Vue Router入门 中的示例进行改造，实现与 vue 与 vue-router 的整合。

---

安装

yarn add vue-router

安装成功，可以在 package.json 文件中找到

整合

所有跟路由相关的配置都将放置于 src/router 目录下，方便管理

配置

在 src 目录下创建 router 目录

• index.ts：路由引入文件
• routes.ts：路由配置文件

index.ts 内容如下，其中对 routes 进行了引入

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from './routes'

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

export default router

routes.ts 内容如下

暂时配置为空数组，后面编写示例时，再进行添加

export const routes = []

挂载

在 main.ts 文件中，将 vue-router 引入 vue 项目

import Vue, { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'

const app = createApp(App)
app.use(router)
app.mount('#app')

使用

修改 App.vue，内容如下

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

---

示例

接下来通过一个示例，演示在 vue-router 模式下如何开发页面及页面间的如何进行跳转

一、配置路由

在 routes.ts 文件中配置路由，这里定义了两个路由，分别指向 views 目录下的 Home.vue 及 About.vue

export const routes = [{
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */'@/views/Home.vue')
}, {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "Home" */'@/views/About.vue')
}]

二、创建页面

在 views 目录下创建 Home.vue、About.vue 及 Index.vue，Index.vue 作为一个组件被其它两个页面引用，内容如下：

• Home.vue

<template>
    <Index />
    <h1>Home</h1>
</template>

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

• About.vue

<template>
    <Index />
    <h1>About</h1>
</template>

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

• Index.vue

<template>
    <ul>
        <li><router-link to="/">Go to Home</router-link></li>
        <li><router-link to="/about">Go to About</router-link></li>
    </ul>
</template>