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

vue3配置router路由并实现页面跳转

1、安装vue-router
用vue3需要安装版本4.0以上的vue-router,安装命令:

npm install vue-router@next --save

vue2尽量安装4.0以下版本,安装命令:

npm i vue-router@3.1.3

在package.json中可以查看vue-router版本号:
在这里插入图片描述
2、根目录下新建router文件夹,下面新建index.js文件和routes.js
在这里插入图片描述

2.1文件中引入vue方法、配置页面具体路径
vue2和vue3代码区别如下:
【vue3】
在这里插入图片描述
在这里插入图片描述
ps:引入文件时记得新建view文件夹以及里面的A、B.vue两个页面

【vue2】
在这里插入图片描述
3、main.js文件中引入路由
在这里插入图片描述
4、APP.vue里声明路由的占位符<router-view></router-view>
在这里插入图片描述
5、测试
在这里插入图片描述

6、文件代码
HelloWorld.vue

<template><!-- <h1>{{ msg }}</h1> --><div class="card"><router-link to="/A">A</router-link>&nbsp;<router-link to="/B">B</router-link>&nbsp;<!-- 第二种方法 router.push--><!-- <button @click="show('a')">A页面</button><button @click="show('b')">B页面</button> --></div>
</template><script setup>
import {useRouter,useRoute} from 'vue-router'
//const router = useRouter()
//const route = useRoute()// defineProps({
//   msg: String,
// })// 第二种跳转方法
// const show=(index)=> {
//   if(index == 'a') {
//     router.push('/a')
//   }
//   if(index == 'b') {
//     router.push('/b')
//   }
// }
</script><style scoped></style>

index.js

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

routes.js

const a = () => import('../view/A.vue')
const b = () => import('../view/B.vue')const routes = [//实现路由重定向,当进入网页时,路由自动跳转到/a路由//{   //	path:'/',//    redirect:'/a'    // },{path: '/',component:a,},{name: 'a',path: '/a',component:a},{name: 'b',path: '/b',component: b},];export default routes

APP.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script><template><div><h1>App 组件</h1><HelloWorld msg="hello" /><!-- 声明路由的占位符 --><router-view></router-view></div>
</template><style scoped></style>

补充:
编程式导航

通过调用 API 实现导航的方式,叫做编程式导航。
与之对应的,通过点击链接实现导航的方式,叫做声明式导航。例如:
1. 普通网页中点击 链接、vue 项目中点击 都属于声明式导航
2. 普通网页中调用 location.href 跳转到新页面的方式,属于编程式导航

vue-router 中的编程式导航 API
vue-router 提供了许多编程式导航的 API,其中最常用的两个 API 分别是:

this.$router.push('hash 地址')  跳转到指定 Hash 地址,从而展示对应的组件
this.$router.go(数值 n)  实现导航历史的前进、后退
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

但是history也是有缺点的,不怕前进后退跳转,就怕刷新(如果后端没有准备的话),因为刷新是实实在在地去请求服务器了。

相关文章:

vue3配置router路由并实现页面跳转

1、安装vue-router 用vue3需要安装版本4.0以上的vue-router&#xff0c;安装命令&#xff1a; npm install vue-routernext --savevue2尽量安装4.0以下版本&#xff0c;安装命令&#xff1a; npm i vue-router3.1.3在package.json中可以查看vue-router版本号&#xff1a; 2、…...

Java中字符串的初始化详解

前言 在深入学习字符串类之前&#xff0c;我们先搞懂JVM是怎样处理新生字符串的。当你知道字符串的初始化细节后&#xff0c;再去写String s "hello"或String s new String("hello")等代码时&#xff0c;就能做到心中有数。 首先得搞懂字符串常量池的概…...

面向对象(七)-- 代码块

目录 1. 代码块的概述 2. 代码块的分类 3. 代码块的执行优先级 1. 代码块的概述 在Java中,使用 { } 括起来的代码被称为代码块 2. 代码块的分...

《编程思维与实践》1037.一元多项式乘法

《编程思维与实践》1037.一元多项式乘法 题目 思路 比较容易想到将步骤分为三步: 1.读取多项式每项的系数(coefficient)和对应的指数(dim); 2.进行多项式乘法; 3.输出进行多项式乘法后的非零项系数. 其中多项式乘法可以通过循环来处理,输出可以用if来判断系数是否为0,需要考虑…...

top命令学习

文章目录 一、top命令回显信息含义1、第一行2、第二行3、第三行4、第四行5、第五行6、第六行进程信息 二、top简单交互1、按数字“1”&#xff0c;显示列出所有cpu的信息2、按“M”&#xff0c;按内存使用率从大到小排序3、按“P”&#xff0c;按CPU使用率从大到小排序 一、top…...

PHP数组的功能及实现案例

目录 前言 一、什么是数组 二、创建关联数组 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 三、创建索引数组 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 前言 1.若有选择&#xff0c;可实现在目录里进行快速查找&#xff…...

Cesium实践(4)——空间数据加载

文章目录 前言几何形体点线面体 标签文字图标 几何文件GeoJsonKMLCZML 三维模型总结 前言 本文介绍Cesium如何加载空间数据&#xff0c;空间数据即明确定义在三维空间中的数据&#xff0c;空间数据包括以下几类&#xff1a;1、几何形体&#xff08;点、线、面、体&#xff09;…...

FreeRTOS(三)——应用开发(一)

文章目录 0x01 FreeRTOS文件夹FreeRTOSConfig.h文件内容上面定义的宏决定FreeRTOS.h文件中的定义0x02 创建任务创建静态任务过程configSUPPORT_STATIC_ALLOCATION创建动态任务过程configSUPPORT_DYNAMIC_ALLOCATION 0x03 FreeRTOS启动流程启动流程概述 0x04 任务管理任务调度器…...

这些 Linux 的自动化技巧,教你轻松完成任务

linux 系统的 web 网站在运营状态时&#xff0c;我们常需要对网站进行维护&#xff0c;例如查看资源剩余并做出响应、日志分割、数据整理&#xff0c;在特定状态执行特定任务等等&#xff0c;这些都会需要 linux能实现自动执行某些任任务。本篇博文介绍如何进行常见的linux自动…...

PAL制搜台

PAL电视制式 PAL电视制式(Phase Alternating Line)采用625线制式,视讯制式采用PAL-B/G、PAL-D/K、PAL-I等。PAL电视不像NTSC制式有中心频点,它采用宽带的频率范围进行电视信号的调制和传输。 PAL电视制式频率 PAL电视采用UHF(超高频)和VHF(甚高频)两个频段进行电视信号的传输…...

SpringBoot 使用 Docker Registry Api

Spring Boot是一个快速开发Web应用程序的框架&#xff0c;它提供了许多方便的工具和库&#xff0c;使得开发过程更加高效。在部署Spring Boot应用程序时&#xff0c;使用Docker容器是现代化和流行的选择。在此背景下&#xff0c;本文将介绍如何使用Docker Registry API来构建、…...

Win10任务栏卡死怎么办?这3个方法快收藏!

案例&#xff1a;win10任务栏卡死 【姐妹们&#xff0c;我的win10任务栏一直卡着&#xff0c;我完全没法使用计算机了&#xff0c;遇到这种情况&#xff0c;我应该怎么做呢&#xff1f;求大家给我支支招&#xff01;感谢感谢&#xff01;】 我们使用电脑的过程中&#xff0c;…...

这一篇搞定Spring

文章目录 一、引言1.1 原生web开发中存在哪些问题&#xff1f; 二、Spring框架2.1 概念2.2 访问与下载 三、Spring架构组成四、山寨版的Spring容器4.1准备工作4.2 山寨IOC容器4.3 配置文件告诉容器 管理哪些bean4.4 相关类4.5 测试 容器 五、构建Maven项目5.1 新建项目5.2 选择…...

软测如果这么学,培训班都得倒闭,直接省去上万元的学费

俗话说外行看热闹&#xff0c;内行看门道。 写这篇文章&#xff0c;是希望把我的一些我认为是非常有价值的经验总结出来&#xff0c;能够帮助刚做测试不久的新同学&#xff0c;或者是测试经验丰富的老同学以共享。 希望我们可爱的新同学&#xff0c;准备要在测试领域耕耘的伙…...

赎金信(Hash的应用)

给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 来源&#xff1a;力扣&#xff0…...

4月更新!EasyOps®全平台27项新功能一口气来袭~

又到了每月产品盘点时刻&#xff0c;27大新功能上线和升级优化&#xff0c;设计Hyperlnsight超融合持续观测平台、DevOps持续交付平台、AutoOps自动化运维平台、ITSM服务平台、公共服务&#xff0c;在不断的技术创新过程中&#xff0c;进一步加速IT运维效率升级。 下面和小编一…...

程序计算任意连续的12个月公里数不超三万公里预警

为了比亚迪的电池终身质保&#xff0c;写了个简单算法&#xff0c;计算任意12个连续的月份公里数加起来不超过3万公里的预警import java.util.ArrayList; import java.util.Arrays; import java.util.List; import java.util.Scanner; import java.util.stream.Collectors;/***…...

【IMU】IMU知多少之42866

ICM-42688-P数据手册中加速度计和角速度计的超量程阈值分别如下&#xff1a; 加速度计超量程阈值&#xff1a; 数字量&#xff08;LSB&#xff09;&#xff1a;16g 模拟量&#xff08;g&#xff09;&#xff1a;22g 角速度计超量程阈值&#xff1a; 数字量&#xff08;LSB&a…...

谁说不能用中文写代码?

入门教程、案例源码、学习资料、读者群 请访问&#xff1a; python666.cn 大家好&#xff0c;欢迎来到 Crossin的编程教室 &#xff01; 现代计算机和编程的起源和推动力量主要源自美国&#xff0c;再加上26个字母很便于表示&#xff08;算上大小写&#xff0c;6位bit就够了&am…...

Java阶段二Day07

Java阶段二Day07 文章目录 Java阶段二Day07V17UserControllerDispatcherServletControllerRequestMapping V18DispatcherServletHandleMapping V19BirdBootApplication 线程池线程的执行过程线程池API 数据库数据库的基本概念数据库管理系统中常见的概念 SQL分类DDL语言-数据定…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...