Vue3-VueRouter4路由语法解析

1.创建路由实例由createRouter实现

2.路由模式

1)history模式使用createWebHistory():地址栏不带#

2)hash模式使用createWebHashHistory():地址栏带#

3)参数是基础路径,默认/

括号里的就是设置路径的前缀,此处是个变量,也可以设置固定值

import.meta.env.BASE_URL:vite中的环境变量

在vite.config.js文件中配置base设置import.meta.env.BASE_URL

详细参考:环境变量和模式 | Vite 官方中文文档

向前兼容vue2语法,比如在模板中使用$router.push('路径')也可以跳转,但是在js中使用this.$router.push('路径')不可以跳转,因为vue3中获取不到this

在Vue3 Composition中

import { useRouter, useRoute } from 'vue-router'

获取路由对象 router useRouter

const router=useRouter()

获取路由参数 route useRoute

const route=useRoute()

这样就可以用router.push('路径')来跳转页面了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/204389.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++初阶】五、类和对象(日期类的完善、流运算符重载函数、const成员、“”取地址运算符重载)

相关代码gitee自取: C语言学习日记: 加油努力 (gitee.com) 接上期: 【C初阶】四、类和对象 (构造函数、析构函数、拷贝构造函数、赋值运算符重载函数)-CSDN博客 一 . 日期类的完善 此次日期类的成员函数,采用声明…

大模型训练为什么用A100不用4090

这是一个好问题。先说结论,大模型的训练用 4090 是不行的,但推理(inference/serving)用 4090 不仅可行,在性价比上还能比 H100 稍高。4090 如果极致优化,性价比甚至可以达到 H100 的 2 倍。 事实上&#x…

数据库中生成列的对比

简介 生成列(虚拟列):在实际开发中,相对一个历史数据的表增加一个字段,增加下游报表,数据分析的可用性。常见的方法就是删表重建,或者使用ADD column 语法。如果是一个历史表,删…

【算法】一个简单的整数问题(树状数组、差分)

题目 给定长度为 N 的数列 A,然后输入 M 行操作指令。 第一类指令形如 C l r d,表示把数列中第 l∼r 个数都加 d。 第二类指令形如 Q x,表示询问数列中第 x 个数的值。 对于每个询问,输出一个整数表示答案。 输入格式 第一行…

STM32 ADC转换器、串口输出

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、ADC是什么?二、STM32的ADC2.1 认识STM32 ADC2.2转换方式2.3 为什么要校准?2.4 采样时间计算2.5 触发方式2.6 多通道采集解决方案2.7…

平衡树 - splay

相比于之前的普通平衡树进行左旋右旋来比,splay的适用性更高,使用更广泛。 核心函数rotate、splay函数,其它的根据需要进行修改。 int n, m; struct Node {int s[2], p, v, cnt; // 左右儿子、父节点、值、出现数量int size, flag; // 子树大…

【视觉SLAM十四讲学习笔记】第三讲——四元数

专栏系列文章如下: 【视觉SLAM十四讲学习笔记】第一讲——SLAM介绍 【视觉SLAM十四讲学习笔记】第二讲——初识SLAM 【视觉SLAM十四讲学习笔记】第三讲——旋转矩阵 【视觉SLAM十四讲学习笔记】第三讲——Eigen库 【视觉SLAM十四讲学习笔记】第三讲——旋转向量和欧…

在CI/CD中使用submodule

背景信息 客户的submodule使用的是ssh协议拉取 前置操作 gitlab添加子模块 git clone ssh://gitkube.bdeet.top:2222/cicd/123.git cd 123/ ls -la git submodule add ssh://gitkube.bdeet.top:2222/approve/test-1.git git submodule add ssh://gitkube.bdeet.top:2222/mr…

带你用uniapp从零开发一个仿小米商场_10. 首页开发

图标菜单栏开发 轮播图开发完成后,就是图标菜单栏了 可以看出这些图标都是一样的样式,所以可以勇哥flex布局让他们每个占百分之20 代码如下,既然都是一样的那就直接用个循环嵌套一下 data数据如下 同样,为了能让这段代码能在别的地方也用到,我直接把它封装成组件 <templ…

【算法】七大经典排序(插入,选择,冒泡,希尔,堆,快速,归并)(含可视化算法动图,清晰易懂,零基础入门)

​ 目录 一、排序的概念及其运用1.1 排序的概念1.2 排序的应用1.3 常见的排序算法 二、常见排序算法的实现2.1 插入排序2.1.1 直接插入排序2.1.2 希尔排序2.1.3 直接插入排序和希尔排序的性能对比 2.2 选择排序2.2.1 直接选择排序2.2.2 堆排序2.2.3 直接选择排序和堆排序的性能…

京东秒杀之项目搭建

shop-parent [pom] &#xff08;商品父模块&#xff09; 1 创建maven项目 2 配置pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSch…

Pytorch Lightning 完全攻略

Pytorch-Lightning这个库我“发现”过两次。第一次发现时&#xff0c;感觉它很重很难学&#xff0c;而且似乎自己也用不上。但是后面随着做的项目开始出现了一些稍微高阶的要求&#xff0c;我发现我总是不断地在相似工程代码上花费大量时间&#xff0c;Debug也是这些代码花的时…

【栈和队列(1)(逆波兰表达式)】

文章目录 前言什么是栈(Stack)栈方法栈的模拟实现链表也可以实现栈逆波兰表达式逆波兰表达式在栈中怎么使用 前言 什么是栈(Stack) 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0…

C++不同平台下的RTTI实现

给定一个含有虚函数的对象的地址&#xff0c;找到对应的类名&#xff0c;不同平台下方法也不同&#xff0c;这是由于RTTI实现并没有统一的标准。 Linux&#xff1a; #include <iostream> #include <typeinfo>class Person { public:virtual void func(){std::cout…

人机交互2——任务型多轮对话的控制和生成

1.自然语言理解模块 2.对话管理模块 3.自然语言生成模块

【FGPA】Verilog:JK 触发器 | D 触发器 | T 触发器 | D 触发器的实现

0x00 JK 触发器 JK 触发器是 RS 触发器和 T 触发器的组合&#xff0c;有两个输入端 J 和 K&#xff0c;如果两个输入端都等于 1&#xff0c;则将当前值反转。 行为表 状态图 Timing Diagram Circuit JK 触发器的设计目的是防止 RS 触发器在输入 S 和 R 均等于 …

JAVA文件IO, File类, 字符流,字节流

文章目录 文件IO1. File2. IO流2.1 字符流2.1.1 Reader2.1.2 Writer 2.2 字节流2.2.1 InputStream2.2.2 FileInputStream2.2.3 利用Scanner进行字符读取2.2.4 OutputStream 文件IO I: Input, 从硬盘往内存读数据 O: Output, 从内存往硬盘输出数据 1. File Java 中通过 java…

java:jpa、Hibernate、Spring Data JPA、ORM以及和mybatis的区别

文章目录 Java连接数据库几种方式JPAHibernate和Spring Data JPAORM框架jpa和mybatis区别Spring Boot JPA使用例子1、创建库和表2、添加依赖3、配置数据源和Hibernate属性4、配置实体类5、创建一个继承JpaRepository的接口&#xff1a;6、创建一个控制器&#xff08;Controller…

SpringCloud原理-OpenFeign篇(四、请求原理)

文章目录 前言正文一、书接上回&#xff0c;从代理对象入手二、ReflectiveFeign.FeignInvocationHandler#invoke()三、SynchronousMethodHandler#invoke(...) 的实现原理3.1 invoke(...)源码3.2 executeAndDecode(...) 执行请求并解码 四、如何更换client 的实现 附录附1&#…

mac电脑下载Netflix Mac(奈飞客户端)安装教程

Netflix Mac&#xff0c;奈飞官方客户端&#xff0c;带给您无限的电影和剧集体验&#xff01;与朋友分享最新热门剧集、电影&#xff0c;与家人一起享受高品质的流媒体内容。 通过Netflix Mac&#xff0c;您可以轻松地搜索、浏览和观看各种类型的影片&#xff0c;包括剧情片、…