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

发表于 阅读次数： Waline： 本文字数： 1.5k 阅读时长 ≈ 5 分钟
在这篇Vue3入门笔记中，我们深入探讨如何利用Vue3实现页面路由功能。通过详细的代码示例和步骤，读者将学会配置路由、引用组件和实现菜单栏跳转，甚至了解固定路由与动态路由的区别和用法。本文适合有一定Vue基础的开发者，希望帮助你更高效地构建项目与后端API互动。点击查看完整代码示例和学习资源，开始优化你的Vue3项目吧！

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

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

完善页面路由

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

我们需要哪些路由

我们再看一下之前的左侧菜单栏中的按钮，如下图，
vue3-router-demo
可以看出来有首页和其他两个按钮，这两个按钮背后其实也就是对应着两个路由。
虽然实际项目中也不会就这两个按钮，但是实现上差不多，所以就用这两个来举例。

修改路由配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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: () => import('../views/other/Other.vue'),
            },
        ]
    },
]

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

export default router
```  
上面这段代码中的第8行`redirect: '/home' `  是用来重定向的，当路由指向“/main”的时候重定向到“/home”，因为/main这个路由实际上只是我们写代码用来封装组件的时候需要，访问页面的人是不需要知道的。  

代码中还引用了Other.vue这个文件，我们还没有，需要创建一下，在src/views/other/目录下创建Other.vue文件，内容如下，
```html
<template>
    Other
</template>

在Main.vue中引用路由

我们在上面确定了需要哪些路由，也在router/index.js中添加了对应的路由，但是没有实际应用他们，现在就来使用。

之前提过/src/Main.vue这个是所有页面的公共组件，也就是说所有的页面都是它的子组件（这个说法不准确，因为页面是没有组件这个概念的，但是大概是这个意思），Main.vue把整个页面范围三个部分，左侧的公共菜单栏，顶部的公共头部分，还有就是主体展示部分，也就是Main.vue里面template中的el-main这个标签里面的内容，如下，

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="180px">
                <common-aside></common-aside>
            </el-aside>
            <el-container>
                <el-header>
                    <common-header></common-header>
                </el-header>
                <el-main>
                    Main
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

现在el-main这个标签里面就是一个字符串Main，我们需要把这个Main替换成<router-view></router-view> ,这样就能应用之前添加的两个路由了。
其实我们在App.vue里面也做过同样的事情，查看App.vue中的代码就知道了，道理是一样的。

为左侧菜单栏添加跳转函数

上面我们已经添加了两个路由，以它们及对应的页面，也在Main.vue中应用了路由，但是路由不会自己跳转，需要人为的触发，一般情况下就是通过点击页面上了的某一个按钮，我们这个案例中就是点击左侧菜单栏，现在来实现这个功能。

其实实现起来很简单，就是为每一个菜单栏绑定一个click事件，这个事件触发的函数就是让浏览器跳转到对应的页面，具体实现看下面的代码。

修改之后，src/components/CommonAside.vue内容如下， 

<template>
    <el-aside>
        <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse-transition="false"
            active-text-color="#ffd04b">
            <h3>后台管理</h3>
            <el-menu-item :index="item.path + ''" v-for="item in list" :key="item.label" @click="handleClick(item)">
                <component class="icons" :is="item.icon"></component>
                <span>{{ item.label }}</span>
            </el-menu-item>
        </el-menu>
    </el-aside>
</template>

<script>
import { useRouter } from 'vue-router'


export default {
    setup() {
        const list = [
            {
                path: '/home',
                name: 'home',
                label: '首页',
                icon: 'home',
                url: '/home'
            },
            {
                path: '/other',
                name: 'other',
                label: '其它',
                icon: 'location',
                url: 'other'
            },
        ];
        const router = useRouter()  // 这是Vue3中使用router的方法，跟Vue2不太一样，需要注意一下
        const handleClick = (item) => {
            router.push({
                name: item.names
            });
        }
        return {
            list,
            handleClick,
        }
    }
}
</script>

<style lang="less" scoped>
.icons {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}
.el-menu-vertical-demo {
    width: 100%;
    border-right: none;
    h3 {
        color: #fff;
        text-align: center;
        margin-top: 10px;
    }
}
</style>

我们在el-menu-item这个标签中绑定了click事件，触发handleClick函数，并传入item这个参数，handleClick这个函数的内容很简单，就是进行路由跳转，看代码就好。

到这里页面路由就能正常跳转了，大家可以运行项目之后点击左测的菜单栏试一下。

动态路由

这边笔记里只介绍了固定路由的情况，就是不管什么人来访问，能够访问的页面都是完全一样的，这种情况下就可以使用固定路由，也就是把路由写死在src/router/index.js中，但是还有可能不同的人能够访问的页面是不一样的，比如有不同权限的人可以访问不同的页面等等，这个时候就要用到动态路由了。

所谓动态路由，就是通过API从后端获取这个用户应该访问哪些API，一般是在用户登录的时候向后端请求一个API获取路由数据然后在渲染到vue-router中，这里有点复杂，不容易用文字写出来，想了解的话看我的代码和这个视频学习: https://www.bilibili.com/video/BV1QU4y1E7qo?p=87&vd_source=55550879a421ab9d1e89e4ff47481a4d