【Vue3 初体验】如何引入并使用vue-router

这是我参与更文挑战的第5天，活动详情查看：更文挑战

一、介绍

vue-router是vue官方推荐使用的路由功能插件，在vue 2.x时被广泛使用。

如今，vue升级至3.x版本，vue-router也有同步升级，vue 3.x版本配套的vue-router版本是4.x。

二、安装并引入使用

vue-router 4.x的官方文档

2.1 安装

在vue 3.x的项目中，执行安装命令：

npm i vue-router@4 --save

2.2 创建路由表，实例化路由对象

在src下新建目录rouer，并新建文件index.ts

// src\router\index.ts
import { createRouter,createWebHashHistory } from 'vue-router'

const PageA = ()=> import('@/pages/pageA.vue')
const PageB = ()=> import('@/pages/pageB.vue')

// 路由表
const routes= [
    
    {
        path:'/page-a',
        component:PageA
    },
    {
        path:'/page-b',
        component:PageB
    },
]

// 实例化路由对象，使用hash模式
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

export default router

2.3 路由注册

在main.ts中，引入路由实例由并在vue实例上注册

// src\main.ts
import { createApp } from 'vue'
// 导入路由实例
import router from '@/router/index'
import App from './App.vue'

const app = createApp(App)
// vue实例上注册路由
app.use(router)
app.mount('#app')

2.4 使用路由

在App.vue中，使用router-view

<template>
  <img src="@/assets/logo.png" alt="">
  <router-view></router-view>
</template>

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

export default defineComponent({
  name: 'App'
})
</script>