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

代码地址: 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
})