[JavaScript知识库]vue3 创建路由「vue-router 4.x 的使用」

本篇主要讲解 vue-router 4.x 如何使用， vue-router 3.x 的使用可以移步此文 Vue 前端路由、vue-router 。

1. 什么是 vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目使用，能够轻松管理单页面应用程序中各组件的切换。

> vue-router 的版本

vue-router 目前有 3.x 和 4.x 的版本。其中：

• vue-router 3.x 只能结合 vue2 进行使用
• vue-router 4.x 只能结合 vue3 进行使用

vue-router 3.x 的官方文档：https://router.vuejs.org/zh/
vue-router 4.x 的官方文档：https://next.router.vuejs.org/

2. vue-router 4.x 的基本使用

> 安装

npm install vue-router@next -S

> 定义路由组件

定义将来要用 vue-router 来控制展示与切换的组件。

> 声明路由链接和占位符

<router-link> 表明路由链接，<router-view> 表明路由占位符

<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link> 
<!-- 路由占位符 -->
<router-view></router-view>

> 创建路由模块

在项目中创建 router.js 路由模块：

import { createRouter, createWebHashHistory } from "vue-router"
// createRouter 用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式 (hash 模式)

// 导入需要切换的组件
import Home from './components/MyHome.vue'
import Movie from './components/MyMovie.vue'
import About from './components/MyAbout.vue'

// 创建路由实例对象
const router = createRouter({
    // 指定路由工作模式
    history: createWebHashHistory(),
    // 定义 hash 与组件之间的对应关系
    routes:[
        { path: '/home', component: Home },
        { path: '/movie', component: Movie },
        { path: '/about', component: About },
    ]
})

// 向外共享路由模块
export default router

> 挂载路由模块

在 main.js 文件中对路由模块进行导入并挂载：

import App from './App.vue'
import router from './router.js'

const app = createApp(App)

// 挂载路由模块
app.use(router)
app.mount('#app')

3. 其他参考

vue 两种路由模式 history 和 hash 介绍可参考此文 ： vue中两种history和hash模式的使用

vue3 中两种模式的创建方法说明可参考此文 ： createWebHistory 和 createWebHashHistory