Vue3-路由

news2024/11/23 4:30:18

 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('路径')来跳转页面了

路由的设计和配置

首先需要提前设计好整个项目的架子,搭建好一级路由、二级路由等的架子

在src/views文件夹下创建各个模块的页面

在src/router/index.js中配置路径

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库安全运维系统厂家在深圳的有哪些?咨询电话多少?

IT小伙伴都知道,数据库安全运维至关重要,因为随着信息技术的不断发展,数据库已经成为企业存储、管理和处理数据的关键平台,数据库承载着企业不少数据资产。因此使用数据库安全运维系统是必要的。那你知道数据库安全运维系统厂家在…

python变量的作用域

同名变量 内层屏蔽外层 global语句 global强调全局变量

实现校园网开机自启动部署

❤️博客主页: iknow181🔥系列专栏: Python、JavaSE、JavaWeb、CCNP🎉欢迎大家点赞👍收藏⭐评论✍ 目录 一.准备工作 1、IDE安装 2、安装Selenium 1.介绍 2.下载 3、安装pywifi 1.介绍 2.下载 4、下载浏览器驱…

MySQL进阶知识:锁

目录 前言 全局锁 表级锁 表锁 元数据锁(MDL) 意向锁 行级锁 行锁 行锁演示 间隙锁/临界锁 演示 前言 MySQL中的锁,按照锁的粒度分,分为以下三类 全局锁:锁定数据库中的所有表。表级锁:每次操…

Git提示 Connection closed by remote host

问题如下图: 解决: 删除./ssh目录下的config文件,如下图config文件是新增的 原因:不知道什么原因,连接外网后突然断开或导致自动增加config文件。

样品实验Fortegra202环氧树脂增韧剂TDS说明书

样品实验Fortegra202环氧树脂增韧剂TDS说明书 150克/瓶

微信小程序input type=nickname不能触发隐私政策?小程序隐私协议开发指南之nickname权限篇

小程序隐私协议开发指南之nickname权限篇 涉及处理用户个人信息的小程序开发者,需通过弹窗等明显方式提示用户阅读隐私政策等收集使用规则。 为规范开发者的用户个人信息处理行为,保障用户合法权益,微信要求开发者主动同步微信当前用户已阅读并同意小程序的隐私政策等收集使…

网络运维与网络安全 学习笔记2023.11.30

网络运维与网络安全 学习笔记 第三十一天 今日目标 实现AP自动注册、配置WLAN业务参数、无线终端通过wifi互访 实现AP自动注册 项目背景 企业内网的大量AP已经通过DHCP的方式获得IP地址 为了实现后期大量AP的统一管理,希望通过AC实现集中控制 在AC设备上&#…

思维跳动:抖店商品怎么设置拼团?

在抖店上销售商品时,设置拼团活动是一种促销策略,可以吸引更多用户参与购买,并增加销量。下面将介绍一些方法和步骤,帮助你在抖店中设置商品的拼团活动。 一、抖店商品怎么设置拼团? 首先,选择适合的商品进…

Java项目学生管理系统二查询所有

学生管理 近年来,Java作为一门广泛应用于后端开发的编程语言,具备了广泛的应用领域和丰富的开发资源。在前几天的博客中,我们探讨了如何搭建前后端环境,为接下来的开发工作打下了坚实的基础。今天,我们将进一步扩展我…

性能优化之FPS

如果每秒钟有60帧,那么每一帧的时间就是总时间(1秒)除以总帧数(60帧): 所以:每帧时间1000 毫秒/60 帧≈16.67 毫秒 因此,如果每秒有60帧,那么每一帧大约需要16.67毫秒来…

华为云之一键安装宝塔面板

华为云之一键安装宝塔面板 一、本次实践介绍1.1 实践环境简介1.2 本次实践目的 二、宝塔面板介绍三、环境准备工作3.1 预置实验环境3.2 查看环境信息3.3 登录华为云3.4 查看弹性云服务器状态3.5 ssh登录弹性云服务器3.6 查看操作系统版本 四、安装宝塔面板4.1 一键部署宝塔面板…

c MJPG(1)

.读取量化表&#xff0c;全局参数&#xff0c;霍夫曼表&#xff0c;恢复表编码&#xff0c;现在只是实现思路。 #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <sys/ioctl.h> #include <sy…

J签证、移民、绿卡都是怎么回事?

随着全球化的不断推进&#xff0c;越来越多的人开始关注国际间的移民与签证政策&#xff0c;其中包括J签证、移民以及绿卡的申请问题。本文将简要介绍J签证、移民绿卡的基本概念&#xff0c;并提供相关申请的一般步骤&#xff0c;以帮助读者更好地了解这些程序。 首先&#xff…

网站优化SEO文章采集组合方法

为了在激烈的网络竞争中脱颖而出&#xff0c;SEO专业人士不断寻求创新的方法和技术。其中&#xff0c;SEO文章采集后重组是一项备受关注的技术&#xff0c;通过巧妙地整合和重新组织已有的信息&#xff0c;以提升网站在搜索引擎中的排名和曝光度。 SEO文章采集是这一技术的第一…

老师上公开课的好处

作为一名老师&#xff0c;公开课是不可避免的&#xff0c;也是提升自己教学水平的重要途径。那么&#xff0c;老师上公开课到底有哪些好处呢&#xff1f;以下几条&#xff0c;也许可以为你解开疑惑。 提升老师的教学水平。在公开课上&#xff0c;老师需要将平时的教学经验、方法…

docker-compose;私有镜像仓库harbor搭建;镜像推送到私有仓库harbor

docker-compose&#xff1b;私有镜像仓库harbor搭建&#xff1b;镜像推送到私有仓库harbor 文章目录 docker-compose&#xff1b;私有镜像仓库harbor搭建&#xff1b;镜像推送到私有仓库harbordocker-compose私有镜像仓库harbor搭建镜像推送到私有仓库harbor docker-compose D…

Elk+Filebeat+Kafka实现日志收集

ElkFilebeatKafka实现日志收集(本机nginx) 部署Zookeeper 1.实验组件 #准备3台服务器做Zookeeper集群 20.0.0.10 20.0.0.20 20.0.0.30 2.安装前准备 #关闭防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0#安装JDK yum install -y java-1.8.0-o…

井盖位移报警器安装,智能化井盖厂家推荐

当井盖发生位移或倾斜时&#xff0c;通常会引起所处道路的安全隐患&#xff0c;给过往的车辆和行人带来许多潜在的危险。为了避免潜在的安全事故频繁出现&#xff0c;及时发现并处理井盖位移或倾斜才能更好的保障人民的安全。因此安装井盖位移报警器是满足政府和市民需求的。 单…

抖音本地生活服务商申请条件

抖音的本地生活服务商目前有两种&#xff0c;一种是可以做全国的服务商&#xff0c;我们一般叫抖音本地生活服务商&#xff0c;一种是区域优待服务商&#xff0c;也就是后面出来的服务商&#xff0c;这两种服务商的申请方式大同小异。 相同的地方就是都需要给平台交保证金。抖…