本篇主要讲解 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