vuerouter声明式导航

声明式导航-跳转传参数

1.查询参数传参

语法:to ''/path?参数名=值''

2.对应页面组件接受传来的值

''$router.query.参数名''

2.动态路由传参

1.配置动态路由

2.配置导航连接

to=''/path/参数值''

 

3.对应页面组件接收传递过来的值

#route.params.参数名

多个参数传递:查询参数的方式

 

动态路由参数可选符,在动态路由后面加?表示参数可传可不传

结果对比

有参

无参

 

网页重定向

Vue路由-404

1.在views组件中创建404组件

404

<template><div><h1>404NotFound</h1></div>
</template><script>export default {}</script><style></style>

2.在路由器中导入组件并匹配路由

 路由设置

设置history

编程式基本跳转

1.路径跳转

path路径跳转

this.router.push

<template><div><p>我的朋友灰灰</p><p>我的朋友白白</p><!-- 将刚刚的声明式导航进行传递值 --><p>{{$route.query.key}}</p><p>{{$route.query.age}}</p><button @click="goinfo">跳转info</button></div></template><script>export default {methods:{goinfo(){// 通过router跳转this.$router.push('/info')}}}</script><style></style>

 

点击

 

name命名路由跳转

 

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

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

相关文章

IPSSL证书:为特定IP地址通信数据保驾护航

IPSSL证书&#xff0c;顾名思义&#xff0c;是专为特定IP地址设计的SSL证书。它不仅继承了传统SSL证书验证网站身份、加密数据传输的基本功能&#xff0c;还特别针对通过固定IP地址进行通信的场景提供了强化的安全保障。在IP地址直接绑定SSL证书的模式下&#xff0c;它能够确保…

互联网轻量级框架整合之装配Bean

依赖注入和依赖查找 应该说IoC的工作方式有两种&#xff0c;一种是依赖查找&#xff0c;通过资源定位&#xff0c;把对应的资源查找出来&#xff0c;例如通过JNDI找到数据源&#xff0c;依赖查找被广泛使用在第三方的资源注入上&#xff0c;比如在Web项目中&#xff0c;数据源往…

python创建新环境并安装pytorch

python创建新环境并安装pytorch 一、创建新环境1、准备工作2、创建虚拟环境并命名3、激活虚拟环境 二、安装pytorch1、pytorch官网2、选择与你的系统相对应的版本3、安装成功 一、创建新环境 1、准备工作 本次创建的环境是在anaconda环境下&#xff0c;否则需要在纯净环境下创…

SpringBoot 使用logback(多环境配置)

Logback是由log4j创始人设计的又一个开源日志组件。可用于项目日志功能。官网地址 第1步&#xff1a;添加坐标依赖 <!--logback--> <dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId><version…

[数据结构]红黑树的原理及其实现

文章目录 红黑树的特性红黑树的时间复杂度推导&#xff1a;结论红黑树与AVL树比较 红黑树的插入红黑树的节点定义调整策略思考情况2&#xff1a;思考情况3&#xff1a; 代码实现myBTRee.htest.cpp 红黑树的特性 红黑树最常用的平衡二叉搜索树。跟AVL树不同的是&#xff0c;红黑…

Python学习之路 | Python基础语法(一)

数据类型 Python3 中常见的数据类型有&#xff1a; Number&#xff08;数字&#xff09;String&#xff08;字符串&#xff09;bool&#xff08;布尔类型&#xff09;List&#xff08;列表&#xff09;Tuple&#xff08;元组&#xff09;Set&#xff08;集合&#xff09;Dict…

uniapp使用地图开发app, renderjs使用方法及注意事项

上次提到uniapp开发地图app时得一些问题&#xff0c;最后提到使用renderjs实现app中使用任何地图&#xff08;下面将以腾讯地图为例&#xff0c;uniapp中写app时推荐使用得是高德地图&#xff0c;无法使用腾讯地图&#xff08;renderjs方式除外&#xff09;&#xff09;。 1、…

力扣HOT100 - 279. 完全平方数

解题思路&#xff1a; 动态规划 class Solution {public int numSquares(int n) {int[] dp new int[n 1];// 初始化dp数组&#xff0c;默认最坏情况是每个数都是由1相加得到的for (int i 1; i < n; i) {dp[i] i;}for (int i 1; i < n; i) {for (int j 1; j * j &…

【案例教程】土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测

查看原文>>>土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测 土地利用/土地覆盖数据是生态、环境和气象等领域众多模型的重要输入参数之一。基于遥感影像解译&#xff0c;可获取历史或当前任何一个区域的土地利用/土地覆盖数据&#xff0c;用于评估区域的生…

【挑战全网】最全高德地图充电桩接入指南,流量必火!

分享《一套免费开源充电桩物联网系统&#xff0c;是可以立马拿去商用的&#xff01;》 一、和高德直接互联互通的优势&#xff1a; 1、高德官方直接互联互通&#xff0c;提供给合作商户独立发展自主权&#xff0c;不依赖任何第三方平台; 2、自己控制电站的上线、下线、修改电…

Pytorch代码基础—张量

Pytorch代码—张量 Pytorch张量 张量的属性&#xff1a; data&#xff1a;被包装的Tensorgrad&#xff1a;data的梯度grad_fn:创建Tensor的Function&#xff0c;是自动求导的关键requires_grad&#xff1a;指示是否需要梯度isleaf&#xff1a;指示是否是叶子结点&#xff0…

多维 HighChart

showHighChart.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><!-- js脚本都是官方的,后两个是highchart脚本 --><script type"text/javascript" src"jquery1.7.1.min.js"&g…

麒麟 V10 安装docker2

1. 查看系统版本 2.安装docker-ce 添加源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装docker yum install docker-ce --allowerasing 重启docker systemctl start docker 3.安装nvidia-container-runtime 添…

Spring初学入门(跟学笔记)

一、Spring概述 Spring是一款主流的Java EE轻量级开源框架。 Spring的核心模块&#xff1a;IoC&#xff08;控制反转&#xff0c;指把创建对象过程交给Spring管理 &#xff09;、AOP&#xff08;面向切面编程&#xff0c;在不修改源代码的基础上增强代码功能&#xff09; 二、…

MT2057 门票

思路&#xff1a; 此题是求有多少个区间的平均值>t&#xff0c; 那么可以把每个值-t。如果新的数列的某个区间的和>0&#xff0c;那么说明这个区间满足条件。 令新数列的前缀和为b[i]&#xff0c;所以求[i, j]区间是否满足条件&#xff0c;即求b[j]-b[i-1]是否>0&am…

端午佳节,品尝食家巷传统面点与黄米粽子礼盒

端午佳节&#xff0c;品尝食家巷传统面点与黄米粽子礼盒 在这个端午节来临之际&#xff0c;食家巷倾情推出一款别具特色的端午礼盒&#xff0c;将甘肃的传统面点与地方特色黄米粽子完美融合&#xff0c;为您带来一场美味与传统的邂逅。 这款礼盒以甘肃传统面点一窝丝、油饼和烤…

Python GUI开发- PyQt5 开发小工具环境入门

前言 常见的python开发gui的库有 Tkinter&#xff0c; PyQt5&#xff0c; wxPython等。本教程是选择PyQt5 开发桌面小工具。 环境准备 只需pip安装即可快速准备好开发环境 pip install pyqt5快速开始 创建一个空的window窗口 Qapplication()&#xff1a;每个GUI都必须包含…

如何安全高效地进行4S店文件分发,保护核心资产?

4S店与总部之间的文件分发是确保双方沟通顺畅、信息共享和决策支持的重要环节。4S店文件分发涉及到以下文件类型&#xff1a; 销售报告&#xff1a;4S店需要定期向总部提交销售报告&#xff0c;包括销售数量、销售额、市场份额等关键指标。 库存管理文件&#xff1a;包括车辆库…

电脑版的学浪课程下载方法

想在你的电脑上无限制地访问你最爱的学浪课程吗&#xff1f;现在&#xff0c;让我揭秘如何用几个简单步骤&#xff0c;轻松下载任何学浪课程到你的电脑&#xff0c;让学习不再受时间和地点的限制&#xff0c;随时随地都是你的课堂。 下载学浪视频的工具&#xff0c;我已经打包…

使用python开发的闭运算调试器

使用python开发的开运算调试器 简介效果代码 简介 用来调试闭运算效果的小工具&#xff0c;滑动条可以控制滤波核的大小&#xff0c;用来查看不同滤波核下的闭运算效果。 效果 代码 import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayou…