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

(Vue2)VueRouter

VueRouter 修改地址栏路径时,切换显示匹配的组件

使用5+2:

1下载版本3.6.5(Vue3对应版本4.X)

npm add vue-router@3.6.5

2引入

import VueRouter from 'vue-router'

3安装注册

Vue.use(VueRouter)

4创建路由对象

const router=new VueRouter()

5将路由对象注入到Vue实例中,建立关联

new Vue({render:h=>h(App),router
}).$mount('#app')

2个核心步骤:

1创建需要的组件(src下views目录下),配置路由规则 main.js

new VueRouter({routes:[{path:'/xxx',component:xx},{}]})

注:Find.vue报错因为find是一个单词,加name,  export default{name:"FindMusic"}

2配置导航,配置路由出口,路径匹配的组件显示的位置

<router-view></router-view>

组件存放目录问题

页面组件 src/views文件夹

复用组件 src/components文件夹

路由的封装抽离

将main.js中路由模块抽离出来。src/router/index.js    @直接指代src,便于写绝对路径

引入三个子网页、Vue、VueRouter

App.vue  router-link标签取代a标签,to取代href,默认提供高亮类名  本质还是a标签

声明式导航(router-link)-两个类名

router-link-active模糊匹配(用得多)to="/my"可匹配/my、/my/a、/my/b

router-link-exact-active精确匹配  to="/my"仅可匹配/my

VueRouter里面linkActiveClass:'xxx',linkEXactiveActiveClass:'xxx'   直接敲link

声明式导航(router-link)-跳转传参

查询参数传参   to="/path?参数名=值"   

对应页面组件接收传递过来的值{{$route.query.参数名 }}

动态路由传参

1配置动态路由path:'/searsh/:words?'(?为可选符,按需加)

2配置导航链接to="/path/参数值"

3对应页面组件接收传递过来的值{{$route.params.参数名 }}

重定向  匹配某一路径后,强制跳转

new VueRouter({routes:[{path:'/',redirect:'/xxx'},{}]})

404   当路径找不到匹配时,给个提升页面   配在路由最后

new VueRouter({routes:[.......{path:'*',component:NotFind},{}]})

模式设置

hash路由(默认).../#/...(#很奇怪)  mode:"hash"

history路由(常用)  new VueRouter({routes,mode:"history"})

编程式导航-基本跳转

点击按钮跳转页面:编程式导航:用js代码来进行跳转

1path路径跳转  绑定的事件函数内this.$router.push('path')

2name命名路由跳转(路径较长时用此写法方便)  new VueRouter({routes:[{name:'xxx',path:'/',redirect:'/xxx'},{}]})

绑定的事件函数内this.$router.push({name:'xxx'})

 编程式导航-路由传参 跳转需要传参

1path路径跳转传参

this.$router.push('/path?key=${{this.inpValue}}&......')  双向绑定的数据传入

this.$router.push({path:'/path',query:{key=this.inpValue}
}) 

动态路由传参 

this.$router.push('/path/参数名')
this.$router.push({path:'/path/参数名'
})

完整写法(更适合传参)

​this.$route.push({name:'xxx',query:{参数名:'参数值'},params:{参数名:'参数值'}
})

相关文章:

(Vue2)VueRouter

VueRouter 修改地址栏路径时&#xff0c;切换显示匹配的组件 使用52&#xff1a; 1下载版本3.6.5&#xff08;Vue3对应版本4.X&#xff09; npm add vue-router3.6.5 2引入 import VueRouter from vue-router 3安装注册 Vue.use(VueRouter) 4创建路由对象 const route…...

6.文本注释方法

1.单行注释 在 LaTeX 中&#xff0c;可以使用 % 符号进行单行注释。 2.整段的注释 但如果要注释一整段文字&#xff0c;可以使用 comment 宏包或 \iffalse 和 \fi 命令来实现。 2.1 使用 comment 宏包 在导言区使用 \usepackage{comment} 命令加载 comment 宏包。然后&…...

[Linux打怪升级之路]-缓冲区

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 本期学习目标&…...

【力扣】13. 罗马数字转整数

题目描述 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符数值I1V5X10L50C100D500M1000 例如&#xff0c; 罗马数字 2 写做 II &#xff0c;即为两个并列的 1 。12 写做 XII &#xff0c;即为 X II 。 27 写…...

高效时间管理,事无巨细掌握——OmniFocus Pro 3 for Mac最强GTD工具

在快节奏的现代生活中&#xff0c;有效地管理和安排时间变得至关重要。如果您正在寻找一款功能强大的时间管理工具&#xff0c;那么OmniFocus Pro 3 for Mac将是您的最佳选择。作为一款专业的GTD&#xff08;Getting Things Done&#xff09;应用程序&#xff0c;它为您提供了一…...

解锁前端Vue3宝藏级资料 第五章 Vue 组件应用 3( Slots )

5.4 Slots 我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props&#xff0c;但组件要如何接收模板内容呢&#xff1f;在某些场景中&#xff0c;我们可能想要为子组件传递一些模板片段&#xff0c;让子组件在它们的组件中渲染这些片段。Slots 可用于将Html内容从父组…...

接口测试之文件上传

在日常工作中&#xff0c;经常有上传文件功能的测试场景&#xff0c;因此&#xff0c;本文介绍两种主流编写上传文件接口测试脚本的方法。 首先&#xff0c;要知道文件上传的一般原理&#xff1a;客户端根据文件路径读取文件内容&#xff0c;将文件内容转换成二进制文件流的格…...

7.Flask-Migrate数据库迁移

基本介绍 flask-migrate是基于Alembic的一个封装,并集成到Flask中 所有的迁移操作其实都是Alembic做的,能跟踪模型的变化,并将变化映射到数据库中 一.安装 pip install flask-migrate二.基本使用 2.1初始化数据库迁移脚本 在Flask应用的根目录下&#xff0c;运行命令 flas…...

信创办公–基于WPS的PPT最佳实践系列 (项目8创建电子相册)

信创办公–基于WPS的PPT最佳实践系列 &#xff08;项目8创建电子相册&#xff09; 目录 应用背景操作步骤 应用背景 如果我们想把图片弄成相册&#xff0c;或者弄成一段有音乐的视频分享给朋友。我们可以利用PPT来制作。那我们如何用PPT制作电子相册或视频呢&#xff1f;可以跟…...

JRedis的基本操作,基本数据类型操作

Redis的基本数据类型&#xff1a; stringhashlistsetzset {public static void main(String[] args) {Jedis jedis new Jedis("127.0.0.1", 6379);// stringjedis.set("hello", "word");String hello jedis.get("hello");System.o…...

QT网页 webengine / CEF

QT WebEngine 官方文档 WebEngine 架构&#xff1a; 能看到 WebEngine 有一个核心模块是基于 Chromium 构造的&#xff0c;通过使用 Chromium 的Blink渲染引擎和V8 JavaScript引擎来处理和渲染Web内容&#xff0c;并将这些底层技术封装为一系列高级的C类和接口&#xff0c;以…...

Golang笔试题:编写一个函数,接收一个整数参数n,输出n的阶乘结果

今天&#xff0c;我们开发的AI笔试题工具&#xff0c;ai扁食——AI程序员笔试系统给我出了中级Golang题目&#xff0c;就是这道题&#xff1a;《请编写一个函数&#xff0c;接收一个整数参数n&#xff0c;输出n的阶乘结果》&#xff0c;希望我写一个函数&#xff0c;输出n的阶乘…...

外包干了2个月,技术退步明显.......

先说一下自己的情况&#xff0c;大专生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…...

无涯教程-JavaScript - BINOM.DIST函数

描述 BINOM.DIST函数返回单个项二项式分布概率。 在具有固定数量的测试或试验的问题中使用BINOM.DIST。 当任何试验的输出只是成功或失败时 试验是独立的,并且 在整个实验中成功的概率不变的情况 语法 BINOM.DIST (number_s,trials,probability_s,cumulative)争论 Argu…...

linux定时重启tomcat

1.编辑重启Tomcat命令 首先编辑一个文件 vi my_restart.sh 然后输入&#xff1a; #!/bin/bash . /etc/profile tomcatPath"/opt/finereport/tomcat" binPath"$tomcatPath/bin" echo "[info][$(date %F %H:%M:%S)]正在监控tomcat&#xff0c;路径&a…...

在静态方法中访问@Value注入的静态变量!!

一、 静态变量 static修饰的成员变量&#xff0c;称为静态成员变量&#xff0c;静态成员变量最大的特性&#xff1a;不属于某个具体的对象&#xff0c;是所有对象所共享的 简单来说&#xff1a;在某些类的对象中存在一些相同的成员变量&#xff0c;那么这种成员变量就可以设置…...

掌握这些算法,让你的编程之路更顺畅——重要算法解析

一个程序员一生中可能会邂逅各种各样的算法&#xff0c;但总有那么几种&#xff0c;是作为一个程序员一定会遇见且大概率需要掌握的算法。这些算法通常被广泛应用于日常编程工作中&#xff0c;是提升编程效率和解决实际问题的重要工具。本文将介绍几种十分重要的“必抓&#xf…...

flink集群与资源@k8s源码分析-总述

1 简介 集群和资源模块提供动态资源能力,是分布式系统关键基础设施,分布式datax,分布式索引,事件引擎都需要集群和资源的弹性资源能力,提高伸缩性和作业处理能力。本文分析flink的集群和资源的k8s模块,深入了解其设计原理,为开发自有的集群和资源组件做技术准备, 同时涉…...

LeetCode 0213. 打家劫舍 II:动动态规划

【LetMeFly】213.打家劫舍 II&#xff1a;动动态规划 力扣题目链接&#xff1a;https://leetcode.cn/problems/house-robber-ii/ 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味…...

VMware17 不可恢复错误mks解决方案

用的虚拟机VMware17版本&#xff0c;然后运行带HDR的unity程序&#xff0c;结果报错 网上找了很多解决方案&#xff0c;都没用。毕竟需要在不放弃虚拟机3D加速的情况下运行。 最终皇天不负有心人&#xff0c;亲测有效的方法&#xff1a; 在虚拟机名字.vmx文件里添加以下2行&a…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...

基于Python的气象数据分析及可视化研究

目录 一.&#x1f981;前言二.&#x1f981;开源代码与组件使用情况说明三.&#x1f981;核心功能1. ✅算法设计2. ✅PyEcharts库3. ✅Flask框架4. ✅爬虫5. ✅部署项目 四.&#x1f981;演示效果1. 管理员模块1.1 用户管理 2. 用户模块2.1 登录系统2.2 查看实时数据2.3 查看天…...