vue3实现与不同的界面跳转【路由 vue-router】

vue实现与不同的界面跳转【vue-】

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

---

---

本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识

本小节的内容是：
vue篇章 之 ： 10.vue实现与不同的界面跳转

---

---

每一个文章小节都会把 标题 说的很清楚。前后关联看，可以快速实现：前后分离。本质上，额外文章链接和文章自己标题内容关系不大。

前面小节文章已经实现springboot的创建，springboot关联前端数据swagger和springboot通过mybatisplus操作数据库：
【2025年】基于电脑的jdk1.8通过idea创建springboot2.x版本(非常简洁快速)
【上榜文章，一文搞定】现在springboot是3.x以上版本，jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot
文章里面也有 为什么只能是jdk17起和地址指定为阿里云报错的解决办法

前面小节已经安装好node.js和分享了一些vue语法，及RESTful风格及安装配置swagger使用，和：
如何启动vue项目及vue语法组件化不同标签应对的作用说明
通过工具生成的vue案例(工具生成vue项目工程结构，里面有一个欢迎界面网页)为切入点，逐步逐步修改分享讲解，完成vue项目如何启动。及自行编写一些标签和样式来替换默认的内容，帮助理解包括里面的标签，js代码，样式如何配合的

---

前言

完成 前端 vue.js工程结构准备
前端能启动vue项目即可(vue项目的工程结构及语法分享在前面章节)。vue项目里面网页怎么写取后台的值和发送数据到后台，刚好是上一小节，09.vue实现与后台springboot传递数据【传值/取值 Axios 】

---

一、安装vue-router

vue-router是官方路由插件，管理项目里面组件的切换。
vue是单页面应用(内容是基于：路由和组件的)。路由用于设定访问路径，将路径和组件关联起来。

vue-router目前只有两个版本，router3(配合vue2) 和 router4(配合vue3)

安装(我案例使用的是vue3,所以我需要安装 router4)：

npm install vue-router@4

在vsCode 工程里面输入命令.安装完成之后，需要在package.json里面的dependencies标签检查一下依赖(一般会自动导入，没有的话，就手写一下，确认当前项目已经添加了路由依赖)

二、准备资源

先准备不同的组件文件，让路由实现不同的文件跳转
我在components文件夹下创建了三个不同的vue。用于模拟网页不同的内容模块

放一个空模板在这里：

<template><h1>你好，帮帮志</h1>
</template>
<script>
</script>
<style>
</style>

三、App.vue编写链接

在App.vue里面编写代码

<template><img alt="Vue logo" src="./assets/logo.png"> <!-- 图片 --><bangbangzhi></bangbangzhi> <!-- 我们自己定义的网页标签(就是一个vue文件的内容) --><!-- 前几个小节有分享 --><div id="bbz"><router-link to="/login">登陆</router-link><router-link to="/register">注册</router-link><router-link to="/welcome">欢迎</router-link>  
<!-- 可以在style里面美化这些标签，如故意写了id为bbz css----》 #bbz{样式:值} -->
<!-- router-link to="/这个单词对应的是 下面即将要写的路由配置文件里面的单词" --><!-- 内容占位 表示：网页这个位置是其他vue文件的标签内容 显示的地方 -->
<!-- 具体显示哪个vue文件，根据用户点击来 。 -->
<!-- 所以：如果目前如果标签很多，具体vue文件过来放哪里，用router-view标记，放这里 -->
<router-view></router-view></div></template>

四、编写路由文件和引入到main.js里面

重新创建一个js文件。放到文件夹router里面

index.js里面编写：

import  { createRouter, createWebHistory }  from "vue-router" //导入包const routes = [  //编写路由配置{path: '/login', //上面标签就对应这个单词name: 'login',component: () => import('../components/login.vue') //路径对应这个文件的vue},{path: '/register',name: 'register',component: () => import('../components/register.vue')},{path: '/welcome',name: 'welcome',component: () => import('../components/welcome.vue')}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router

main.js里面添加：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js' //导入路由createApp(App).use(router).mount('#app')  //。use（使用路由）

启动项目，并点击链接

链接模拟的是菜单栏
我现在的那个图片和帮帮志标签 是网页的头部logo和内容
头部内容除了图片logo，自己需要添加什么，就是这个案例的写法。用户随便点击任意菜单栏的内容，头部不变
用户点击链接的某个菜单栏，下面内容就对应显示某个模块~

---

总结

说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)

其他扩展细节知识点，本系列省略了(或者有链接)如：
路由还有一些案例，但是现在案例基本满足大部分情况，毕竟当前我们的目的是：快速手搓一个前后分离的全栈。其他详细可以查看【帮帮志】单独的分享文章，有的。
vue的其他功能及使用，管它*现在*用不用的上，内容全部丢进来。各位看官自行消化。那~可能会很多很多了（又耗时）。当前 前后分离 系列： 手搓出来之后，您可以自行加功能和内容

（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。 我会依次回答~）