Vue 路由使用

今天在学习 Vue 的时候用到了 路由(router)，这里简单记录下使用过程。

什么是路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

为什么需要路由

因为我们一般用Vue做的都是单页应用，只有一个主页面index.html，所以原来的标签是不起作用的，要使用vue-router来进行管理。
详细的原因可以参考这位大佬的解释https://zhuanlan.zhihu.com/p/26003077

背景

现有两个页面 http://127.0.0.1:5173/login 和 http://127.0.0.1:5173， 分别对应了登录页面和主页面，现在想实现登录后跳转到主页面。
登录页面和主页面对应的 vue 文件分别为 Login.Vue 和 Layout.Vue。

实现

安装

npm install vue-router

创建路由器并使用

在 src/router/index.js 中添加一下代码

import { createRouter, createWebHistory } from "vue-router";

// 导入登录组件和主页面组件，就是刚才说的 Login.vue 和 Layout.vue
import LoginVue from '@/views/login.vue'
import LayoutVue from '@/views/layout.vue'

// 定义路由关系
const routes = [
    {
        path: '/login',
        name: 'Login',
        component: LoginVue
    },
    {
        path: '/',
        name: 'Layout',
        component: LayoutVue
    }
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

// 导出路由
export default router

在 vue 应用实例中使用 router

import './assets/main.scss'

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入路由
// 因为这里路由的文件是 index.js， 所以直接写@/router就可以了，
// 如果是其他名字，需要在router后面加上文件名，@/router/***.js
import router from '@/router'

const app = createApp(App)
// 使用路由
app.use(router)
app.use(ElementPlus)
app.mount('#app')

定义展示路由组件的地方

<script setup>

</script>

<template>
	<!-- 展示路由 -->
  <router-view></router-view>
</template>

<style scoped>

</style>

最后给登录按钮添加一个点击事件

// 调用后台接口，完成登录
    import { useRouter } from 'vue-router'
    const router = useRouter();
    // 点击登录按钮会调用此方法
    const login = async () => {
        // 跳转到首页
        router.push('/')
    }