Vue3 入门笔记二 ---- 使用vue-router配置路由

发表于 阅读次数： Waline： 本文字数： 1.1k 阅读时长 ≈ 4 分钟
学习如何使用vue-router配置Vue3项目路由。本文提供详细的步骤和示例代码，帮助你快速上手并搭建项目，与后端API交互。通过简单的路由介绍和实用指南，让你的Vue3应用更轻松地导航和管理页面。点击查看完整教程。

代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。

路由的简单介绍

不论是前端还是后端，都有路由的概念，可以这样简单地理解路由： 路由是指向不同页面或者功能的标记。

比如在本地运行vue3的项目之后，可以通过浏览器打开http://localhost:5173/ 这个地址，这个本地地址的最后一个斜杠 / 其实就是一个路由，一般称之为跟路由，vue3会把浏览器引导到vue3的默认首页。

在比如， https://cn.vuejs.org/guide/essentials/application.html 中的 /guide/essentials/也是一个路由，它会将用户指向一固定的页面。

vue-router

vue-router是vue官方推荐的路由工具，有v3和v4两个版本，3是和vue2搭配使用的，4是和vue3搭配使用的，我们使用的就是v4版本。

安装vue-router

安装很简单，就一条命令

1
npm install vue-router

创建router配置代码

在src目录下创建一个router目录，然后在router目录里面创建一个index.js文件，可以对照开头链接里面的代码检查目录结构是否正确。

在index.js里面写以下代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'main',
        component: () => import('../views/home/Home.vue'),
    },
]

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

export default router

上面的这段代码结构其实大部分都是格式化，主要解释一下routes里面的内容。
routes是一个列表，
列表中的元素都是字典，
path的值就是路由，样例代码中是跟路由，
name的值就是为这个路由起的一个别名，
component的值就是这个路由指向的页面文件，这里指向Home.vue(还没有创建）

创建页面文件

上面的路由指向了一个Home.vue，但是这个文件我们还没有创建，现在创建一下。
首先在src目录下创建一个views目录，我们之后所有的页面文件都放在这里面；
在views里面创建一个home目录，用于放置首页的页面文件，
在home目录里面创建Home.vue ，内容如下。 

1
2
3
<template>
Home    
</template>

Home.vue的内容很简单，作用就是在页面上显示一个Home 字符串

绑定router到vue实例上

光有router和对应的页面文件是不够的的，因为还没有跟vue关联，所以vue不能识别router中指定的路由。所以我们接下来要做的就是把router和vue关联起来。

  1. 修改App.vue
    在上一篇笔记中提到过，App.vue相当于一个根组件，vue中所有的页面刷新的时候都会先经过App.vue, 所以如要想要router在vue中生效，肯定也要在App.vue中有所配置。将App.vue中原本的内容都删掉，替换为以下代码： 
    1
    2
    3
    <template>
        <router-view></router-view>
    </template>
  2. 修改main.js
    在上一篇笔记中也提到过，main.js相当于的vue应用的启动入口，经常会把一些全局的配置放在这里，vue-router就要放在main.js中跟随vue的启动一起加载，修改后的main.js 如下所示： 
    1
    2
    3
    4
    5
    6
    7
    8
    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router/index.js'
    import './assets/main.css' 

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

这段修改其实只做了一件事情，就是在main.js中引入router，然后跟app绑定。

到这里vue-router就已经配置好了，在vue3-notes路径下执行 npm run dev， 然后在浏览器中打开http://localhost:5173/#/, 页面上应该会显示一个Home的字符串。

至于上面的地址为什么是http://localhost:5173/#/， 而不是http://localhost:5173/， 这是由src/router/index.js中的一段代码决定的，我们为history赋予的值是createWebHashHistory()，所以地址最后是“/#/”,而不是“/”，其中原因就要请大家自己去看vue-router的文档了。 

1
2
3
4
const router = createRouter({
    history: createWebHashHistory(),
    routes
})