当前位置: 首页 > news >正文

vue基础教程(4)——十分钟吃透vue路由router

同学们可以私信我加入学习群!


正文开始

  • 前言
  • 一、路由概念
  • 二、路由使用
  • 三、创建路由对应的组件
  • 四、给整个项目一个入口
  • 总结


前言

前面的文章运行成功后,页面显示如下:
在这里插入图片描述
在这个页面中,点击Home和About都会切换右面的页面内容,这就是一个最简单的路由。


一、路由概念

什么是路由?这是每一个上手现代前端框架的同学,都要接触的一个概念。

我们不照搬官网,只用自己的大白话来聊聊这个概念。

我们对网站最朴素的理解,应该是一个页面对应于一个html文件,从某一个页面跳转到另一个页面,就是从一个html跳转到另一个html,这确实也是js、jq时代,前端的跳转逻辑。

但是现在vue框架里只有一个html——index.html,所有的页面内容,都以js的方式,插入到了这个index.html页面中。

现在只有一个html文件了,那么我们如何实现在点击某个按钮时,跳转到另一个页面?要跳转页面的名称是什么?地址是什么?需不需要传什么参数过去?

这所有的操作现在都需要由js来完成,而这部分功能封装成一个插件就是router。

本博主——中二少年学编程,呕心沥血,终于完成了下面这张心法总纲:
在这里插入图片描述

二、路由使用

相信通过上面的心法总纲,你已经打通了任督二脉,现在距离武林高手,也就差几个简单招式而已。

招式一:前端三件套:下载、调用、初始化

下载:

如果跟着博主教程走过来,是不用下载的,因为vue脚手架里自带着router插件,我们前面选择过。

调用:

在main.js中通过import引入:

import router from './router'

初始化:

const app = createApp(App)
app.use(router)

如果你的main.js还有其他代码,大概是这个样子,大家可以参考着修改自己的项目:


import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'
import store from '@/stores'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'import '@/assets/css/style.scss'
import '@/assets/css/my-base.css'
import '@/assets/css/base-info.css'import config from '@/config'
const app = createApp(App)app.use(createPinia())
app.use(store)
app.use(router)
app.use(ViewUIPlus)
app.config.globalProperties.$config = config
app.mount('#app')

招式二:定义路由文件

现在我们把路由应用到了项目里,但是它是个空架子,我们并没有定义路由信息,js就无法知道,在什么条件下找到对应页面渲染。

定义路由文件,先找到我们router文件夹下的index.js文件:
在这里插入图片描述
没有经过修改的路由文件,大致是像下面这样:

import { createRouter, createWebHistory } from 'vue-router'
import Main from '@/components/main'const router = createRouter({history: createWebHistory(''),routes: [{path: '/',name: 'login',meta: {title: '登录',hideInMenu: true},component: () => import('@module-base/views/login/login.vue')},{path: '/home',name: '_home',redirect: '/home',component: Main,meta: {hideInMenu: true,notCache: true},children: [{path: '/home',name: 'home',meta: {hideInMenu: true,title: '首页',notCache: true,icon: 'md-home'},component: () => import('@module-base/views/home/home.vue')}]},{path: '/qrCode',name: 'qrCode',// component: Main,meta: {title: '二维码'},children: [{path: '/qrCode_contact',name: 'qrCode_contact',meta: {icon: 'ios-person-add',title: '联系我',noToken:true},component: () => import('@module-base/views/qrcode-contact/qrcode-contact.vue')}]},
]
})

代码分析:
routes字段是一个数组,记录的就是路由的所有信息。一下是路由中字段含义:

path:路由地址;

name:路由名称;

redirect:重定向地址;

component:这个路由要渲染的组件(页面)

meta:一些附加信息,这个可以先不用关心,因为里面很多字段都不是官方路由插件提供的,是我们个性化定制开发用的;

招式三:模块化改造

我们对上面的路由文件进行简单改造,就是把routes字段里的数组,通过es6模块化的方式,分离出去,变成两个文件:index.js和router.js

index.js:

import { createRouter, createWebHistory } from 'vue-router'
import routes from './routers'const router = createRouter({history: createWebHistory(''),routes
})

router.js:

import Main from '@/components/main'export default [{path: '/',name: 'login',meta: {title: '登录',hideInMenu: true},component: () => import('@module-base/views/login/login.vue')},{path: '/home',name: '_home',redirect: '/home',component: Main,meta: {hideInMenu: true,notCache: true},children: [{path: '/home',name: 'home',meta: {hideInMenu: true,title: '首页',notCache: true,icon: 'md-home'},component: () => import('@module-base/views/home/home.vue')}]},{path: '/qrCode',name: 'qrCode',// component: Main,meta: {title: '二维码'},children: [{path: '/qrCode_contact',name: 'qrCode_contact',meta: {icon: 'ios-person-add',title: '联系我',noToken:true},component: () => import('@module-base/views/qrcode-contact/qrcode-contact.vue')}]},
]

这样,当以后路由信息的代码,我们都放在router.js中,对路由操作的代码,放在index.js中,把数据和操作解耦。(听不懂就先照做,对拓展有好处的)

三、创建路由对应的组件

如果直接抄上面代码运行,大概率会报错,因为只定义了路由信息,每一个路由地址对应的组件还没有定义呢。

所以我们按照上面的地址路径创建自己的组件,只要vue能通过这个地址找到组件,就会显示对应的页面信息。

@module-base是我定义的一个公共地址,如果不理解,就按照自己的方式,重新写一遍这个地址。

四、给整个项目一个入口

现在我们所有准备工作都完成了,但是其实还是不能直接显示各路由地址对应的组件,因为我们还缺少关键的一步——在项目的页面中,写入一个路由入口。

模板项目可能在App.vue中,有一段这样的代码:

  <header><img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /><nav><RouterLink to="/">Home</RouterLink><RouterLink to="/about">About</RouterLink></nav></div></header>

我们把这段删了,不要这样做,因为我们不可能每加一个路由信息,都在这里维护对应的RouterLink代码。当然如果想测试自己上面路由信息是否维护正确,也可以用这个代码测试一下。

我们把这段代码改为:

  <RouterView />

没错,就是这么简单,当然,js部分引入的模块也会有所变化,整体改正后的代码如下:

<script setup>
import { RouterView } from 'vue-router'
</script><template><RouterView />
</template>

这就是App.vue最简单的模样。


总结

虽然router是很基础简单的插件,但是要完整理解它的各个要点,需要对项目整体有一定理解,前面那篇关于vue项目各个文件目录的介绍,就显得尤为重要了。打牢基础,事半功倍。

获取资源,或者联系我,都可以通过下面入口:

https://lizetoolbox.top:8080/qrCode_contact

相关文章:

vue基础教程(4)——十分钟吃透vue路由router

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、路由概念二、路由使用三、创建路由对应的组件四、给整个项目一个入口总结 前言 前面的文章运行成功后&#xff0c;页面显示如下&#xff1a; 在这个页面中&#xff0c;点击Home和About都会切换右面的页面内容&#…...

使用OpenSSL指令测试椭圆曲线签名算法ECDSA

文章目录 小结问题及解决获取secp256r1的公钥和私钥DER格式使用OpenSSL及secp256r1算法获得签名使用OpenSSL及secp256r1算法对签名进行认证 参考 小结 本文记录了使用OpenSSL指令测试椭圆曲线签名算法ECDSA&#xff0c;进行了以下操作&#xff1a;生成椭圆曲线secp256r1 公私密…...

ubuntu之搭建samba文件服务器

1. 在服务器端安装samba程序 sudo apt-get install samba sudo apt-get install smbclient 2.配置samba服务 sudo gedit /etc/samba/smb.conf 在文件末尾追加入以下配置 [develop_share] valid users ancy path /home/ancy public yes writable y…...

P10—P11:Java程序的编译和运行

编译阶段&#xff08;P10&#xff09; Java程序的运行包括两个阶段&#xff1a;编译阶段、运行阶段编译阶段主要任务&#xff1a;对Java源程序&#xff08;以.java为后缀的文件&#xff09;&#xff0c;进行检查其是否符合Java的语法规则。如果符合&#xff0c;则生成字节码文…...

【Docker】Windows中打包dockerfile镜像导入到Linux

【Docker】Windows中打包dockerfile镜像导入到Linux 大家好 我是寸铁&#x1f44a; 总结了一篇【Docker】Windows中打包dockerfile镜像导入到Linux✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 今天遇到一个新需求&#xff0c;如何将Windows中打包好的dockerfile镜像给迁移…...

数据结构之单链表实现(JAVA语言+C语言)

一、理论 1 单链表结构 2 增、删、查 、改思路 &#xff08;增&#xff09;直接添加放到最后即可。按顺序添加&#xff1a;找到要修改的节点的前一个节点&#xff0c;插入新节点&#xff08;&#xff09;。&#xff08;改&#xff09;要修改的节点修改内容即可。&#xff08;…...

docker 安装Sentinel

1.拉取镜像&#xff1a;docker pull bladex/sentinel-dashboard 2.运行镜像&#xff1a;docker run --name sentinel -d -p 8858:8858 -d bladex/sentinel-dashboard 3. 访问地址&#xff1a; 本地地址&#xff1a;http://localhost:8858 (默认端口为8080) 远程地址&#xf…...

通过内网穿透、域名解析实现本地服务部署到公网的架构设计方案

本文主要是总结这些年自己在家玩互联网服务的心得收获, 同时随着年龄增大, 发现脑子确实越来越不好用, 只有记录到笔记中才是真正有意义的。 学生时期做了一些实验, 比如给实验室做日报系统、管理10多台服务器&#xff0c;当时学习了很多架构设计的知识&#xff0c;比如集群化…...

语音陪玩交友软件系统程序-app小程序H5三端源码交付,支持二开!

电竞行业的发展带动其周边产业的发展&#xff0c;绘制着游戏人物图画的抱枕、鼠标垫、海报销量极大&#xff0c;电竞游戏直播、游戏教程短视频也备受人们喜爱&#xff0c;自然&#xff0c;像游戏陪练、代练行业也随之生长起来&#xff0c;本文就来讲讲&#xff0c;从软件开发角…...

import关键字的使用

- import : 导入 - import语句来显式引入指定包下所需要的类。相当于import语句告诉编译器到哪里去寻找这个类。为了使用定义在其它包中的 Java 类&#xff0c;需用 import 语句来显式引入指定包下所需要的类。相当于 import 语句告诉编译器到哪里去寻找这个类 。 语法格式 …...

江协STM32:点亮第一个LED灯和流水灯

很多单片机都是高电平弱驱动&#xff0c;低电平强驱动&#xff0c;所以这里是低电平有效 点亮一个LED灯 操作STM32的GPIO需要三个操作&#xff1a; 第一个使用RCC开启GPIO的时钟 第二步使用GPIO_Init函数初始化GPIO 第三步使用输出或输入函数控制GPIO 1.使用RCC开启GPIO的时…...

设计模式之建造者模式精讲

也叫生成器模式。将一个复杂的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 在建造者模式中&#xff0c;有如下4个角色&#xff1a; 抽象建造者&#xff08;Builder&#xff09;&#xff1a;用于规范产品的各个组成部分&#xff0c;并进行抽象&…...

vue3源码解析——watch和watchEffect区别

watch和watchEffect是Vue 3.0中新增的两个响应式API&#xff0c;用于监听数据的变化。watch适用于需要获取新值和旧值&#xff0c;或者需要懒执行的场景&#xff0c;而watchEffect适用于需要监听多个数据源&#xff0c;并且需要立即执行的场景。它们之间的区别如下&#xff1a;…...

微服务(基础篇-006-Docker)

目录 初识Docker&#xff08;1&#xff09; Docker解决的问题&#xff08;1.1&#xff09; Docker与虚拟机&#xff08;1.2&#xff09; 镜像和容器&#xff08;1.3&#xff09; Docker和DockerHub&#xff08;1.4&#xff09; docker架构&#xff08;1.5&#xff09; 安…...

深度学习算法概念介绍

前言 深度学习算法是一类基于人工神经网络的机器学习方法&#xff0c;其核心思想是通过多层次的非线性变换&#xff0c;从数据中学习表示层次特征&#xff0c;从而实现对复杂模式的建模和学习。深度学习算法在图像识别、语音识别、自然语言处理等领域取得了巨大的成功&#xf…...

查找算法及查找常用数据结构总结

1.顺序表查找 基本方法&#xff1a; 设查找表以一维数组来存储&#xff0c;要求在此表中查找出关键字的值为x的元素的位置&#xff0c;若查找成功&#xff0c;则返回其位置&#xff08;即下标&#xff09;&#xff0c;否则&#xff0c;返回一个表示元素不存在的下标&#xff0…...

大语言模型---强化学习

本文章参考&#xff0c;原文链接&#xff1a;https://blog.csdn.net/qq_35812205/article/details/133563158 SFT使用交叉熵损失函数&#xff0c;目标是调整参数使模型输出与标准答案一致&#xff0c;不能从整体把控output质量 RLHF&#xff08;分为奖励模型训练、近端策略优化…...

前端三剑客 —— CSS (第二节)

目录 内容回顾&#xff1a; CSS选择器*** 属性选择器 伪类选择器 1&#xff09;:link 超链接点击之前 2&#xff09;:visited 超链接点击之后 3&#xff09;:hover 鼠标悬停在某个标签上时 4&#xff09;:active 鼠标点击某个标签时&#xff0c;但没有松开 5&#xff09;:fo…...

牛客NC31 第一个只出现一次的字符【simple map Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/1c82e8cf713b4bbeb2a5b31cf5b0417c 核心 Map参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可*…...

软考系统架构设计师(摘抄)01

架构师承担的责任 系统架构师设计师是承担系统架构设计的核心角色&#xff0c;他不仅是连接用户需求和系统进一步设计与实现的桥梁&#xff0c;也是系统开发早期阶段质量保证的关键角色。系统架构师就是项目的总设计师&#xff0c;他是一个既需要掌控整体又需要洞悉局部瓶颈&a…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...