Vue3入门笔记----实现页面路由功能

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

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

同步发表于个人站点： http://panzhixiang.cn/article/2022/11/10/60.html

完善页面路由

我们在Vue3 入门笔记 ---- 使用vue-router配置路由里面其实已经配置过页面路由了，但是功能很简单，只有一个main路由，用于让浏览器指向首页，但实际开发中肯定不会就只展示一个页面，不然也就不需要路由这个功能了。

我们需要哪些路由

我们再看一下之前的左侧菜单栏中的按钮，如下图，

可以看出来有首页和其他两个按钮，这两个按钮背后其实也就是对应着两个路由。
虽然实际项目中也不会就这两个按钮，但是实现上差不多，所以就用这两个来举例。

修改路由配置

在Vue3 入门笔记 ---- 使用vue-router配置路由 中提到过，路由配置放在了src/router/index.js文件中了，我们需要在里面添加上面提到的首页和其他这两个路由，添加之后文件内容如下，

import {
   
    createRouter, createWebHashHistory } from 'vue-router'


const routes = [
    {
   
   
        path: '/',
        name: 'main',
        redirect: '/home',   // 用于重定向，
        component: () => import('../views/Main.vue'),
        children: [
            {
   
   
                path: '/home',
                name: 'home',
                component: () => import('../views/home/Home.vue'),
            },
            {
   
   
                path: '/other',
                name: 'other',
                component: