Vue3教程 - 18 路由

什么是路由？

路由是构建单页面应用（SPA）的重要组成部分，使用路由可以通过不同的URL路径来访问不同的页面组件，而无需重新加载整个页面。

也就是说路由可以根据不同的URL实现页面组件的切换，不需要重新加载整个页面。或者点击菜单，只切换内容区的内容，不是整个页面的刷新。

18.1 vue-router

Vue 中的路由是由 vue-router 库提供的，它是一个为 Vue.js 应用设计的官方路由管理器，它和Vue.js的核心深度集成。

也就是说在 Vue 中时候用 Vue Router 实现路由管理。

1 vue-router安装

我们在使用 vite 创建项目的时候，如果勾选了 vue-router，那么在创建的项目中是集成了 vue-router 的。在项目 src 下会生成router 文件夹，在文件夹下会有 index.ts ，其中配置了初始项目的路由配置：

router/index.ts

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

在上面代码中创建了 VueRouter 对象，在 routes 中定义了各个页面的路由。其实从上面也可以看出来，路由就是将 path 指向对应的页面组件。

定义了路由然后在项目的 main.js 中引入路由配置：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'

const app = createApp(App)
// 使用路由
app.use(router)

app.mount('#app')

如果在创建项目的时候没有勾选安装 vue-router，那么需要用 npm 或 cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

# npm安装
npm install vue-router

# yarn安装
yarn add vue-router

然后在 src 目录下新建 router 文件夹，然后在其下新建 index.ts，并编辑内容如下：

// 引入createRouter和createWebHistory
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  // 配置路由模式为history
  history: createWebHistory(),
  routes: [
    // ...后面在这里配置路由
  ]
})

export default router

在上面的代码中创建 VueRouter 实例并导出，后面在 routes 中配置各个路由就可以了。

然后在项目的 main.ts 中导入路由对象并使用。

main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router'

const app = createApp(App)
// 使用路由
app.use(router)

app.mount('#app')

18.2 使用vue-router

下面来学习如何使用 Vue Router，通过两个按钮实现两个组件页面的切换。

内容未完......

查看完整内容 →