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

VueRouter 相关信息

VueRouter 是Vue.js官方路由插件,与Vue.js深度集成,用于构建单页面应用。构建的单页面是基于路由和组件,路由设定访问路径,将路径与组件进行映射。VueRouter有两中模式 :hash 和 history ,默认是hash模式。

原理:更新视图不会重新请求页面

hash 和 history 区别:

hash: url中有# ,#和#后面的都是hash,发送http请求后,不会在http中显示#及#后面的

           window.location.hash读取

           不需要服务器配置

           url 中有# 可能不够美观

            兼容所有浏览器,包括旧版IE 

           工作原理:浏览器的hash 部分(window.location.hash)发生变化时,不会触发页面的重新加载。VueRouter 监听hash 的变化并更新视图。

history:没有#,有两个新方法 replaceState()  pushState()      可对浏览器历史记录栈进行修改

     popState事件监听到状态变更

        需要服务器配置来返回应用的HTML文件。因为在刷新页面或直接访问嵌套路由时,服务器需要返回应用的 HTML 文件。

        url 更符号用户直觉且美观

        仅支持现代浏览器

        工作原理: history 模式使用 history.pushState 和 history.replaceState 方法来操作浏览器的历史记录和地址栏。ueRouter 监听这些变化并更新视图。

Vue Router 提供的 $router.push$router.replace 方法,这些方法分别对应 history.pushStatehistory.replaceState

history.pushState(state, title, url)
 

        添加新记录后,浏览器地址栏立刻显示 localhost:8080/page1,但并不会跳转到 page1,甚至也不会检查page1是否存在,它只是成为浏览历史中的最新记录。切换到其他页面 再点浏览器的回退 会回到page1

VueRouter的守卫:

       全局守卫 beforeEach 

        后置守卫 afterEach 

       路由独享守卫 beforeEnter 

         全局解析守卫 beforeResolve

VueRouter的钩子函数:

全局 beforeEach

路由独享 beforeEnter

组件内 beforeRouterEnter   beforeRouterUpdate  beforeRouterLeave

路由传参的方式:

this.$router.push({path:'',query:{}})   接收参数:this.$route.query

this.$router.push({name:'',params:{}}) 接收参数:this.$route.params

<router-link :to="{path:'',query:{}}"  />

<router-link :to="{name:'',params:{}}"  />

路由跳转方式:

this.$router.push({path:'',query:{}})   会在history中添加记录,点击回退 返回上一页面

this.$router.push({name:'',params:{}}) 

this.$router.replace()    不会在history中添加记录,点击回退 返回上上页面

this.$router.go(n)    当n 为正数 向前跳转,为负数 向后跳转

<router-link to="" />

编程式导航使用的方法:

路由跳转:this.$router.push()

路由替换:this.$router.replace()

后退:this.$router.back()

前进:this.$router.forward()

$route 和 $router 区别:

$route 路由信息对象  path query params  fullPath hash name等

        接收参数this.$route.query    this.$route.params

$router  VueRouter的实例 含有很多属性和子对象 如history对象

           this.$router.push()

配置路由:

安装路由  

npm install--save Vue-Router

引入

import VueRouter from "vue-router"
Vue.use(VueRouter)

配置路由文件

//设置什么路径对应什么组件

const routes = [

{path:"/login",component:Login},

{path:"/home",component:Home},

]

// 实例化路由对象

const router = new VueRoute({

routes,

})

// 把路由对象挂载到Vue的根实例

new Vue({

router,

render:h=>h(App)

}).$mount('#app')

放置路由出口  App.vue文件中  <router-view />

跳转导航 <router-link to="" />

  

路由常用属性:

path 跳转参数

name 命名路由

component 路径对应的组件

children 子路由的配置参数

redirect 重定向路由

active-class

active-class 是VueRouter 中 <router-link >组件的属性,选中样式的切换

引发问题:

        由于 to="/"  引起,active-class 选择样式时根据路由中的路径去匹配,然后 显示,

        例如在my页面中,路由为localhost:8080/#/my,那么to="/” 和to="/my"都可以匹 配到,都会激活选中样式

解决:

        1、在router-link 中写入 exact 首页

        2、在路由中加入重定向 首页 { path: '/', redirect: '/home' }

相关文章:

VueRouter 相关信息

VueRouter 是Vue.js官方路由插件&#xff0c;与Vue.js深度集成&#xff0c;用于构建单页面应用。构建的单页面是基于路由和组件&#xff0c;路由设定访问路径&#xff0c;将路径与组件进行映射。VueRouter有两中模式 &#xff1a;hash 和 history &#xff0c;默认是hash模式。…...

[环境配置]Pycharm:Failed to start [PowerShell.exe]

解决方法&#xff0c;点Local旁边的 号&#xff0c;点击Command Prompt&#xff0c;即可在Pycharm中呼出控制台。 如果要修改Command Prompt的启动时访问的cmd.exe的路径&#xff0c;可以去Settings→Tools→Terminal中&#xff0c;修改Shell Path实现&#xff0c;改为cmd.exe…...

搜狗爬虫(www.sogou.com)IP及UA,真实采集数据

一、数据来源&#xff1a; 1、这批搜狗爬虫&#xff08;www.sogou.com&#xff09;IP来源于尚贤达猎头网站采集数据&#xff1b; ​ 2、数据采集时间段&#xff1a;2023年10月-2024年7月&#xff1b; 3、判断标准&#xff1a;主要根据用户代理是否包含“www.sogou.com”和IP核实…...

北京青蓝智慧科技ITSS服务经理:长安链ChainBridge“链桥”问世 加速国家级区块链网络互联互通

8月5日&#xff0c;据国家区块链技术创新中心消息&#xff0c;我国首个完全自主控制的区块链软硬件技术系统——长安链&#xff0c;正式推出了全场景技术平台ChainBridge“链桥”。 此平台能够支持所有异构和同构的区块链进行协作&#xff0c;满足跨领域、跨地域、跨行业及跨层…...

音视频入门基础:WAV专题(5)——FFmpeg源码中解码WAV Header的实现

音视频入门基础&#xff1a;WAV专题系列文章&#xff1a; 音视频入门基础&#xff1a;WAV专题&#xff08;1&#xff09;——使用FFmpeg命令生成WAV音频文件 音视频入门基础&#xff1a;WAV专题&#xff08;2&#xff09;——WAV格式简介 音视频入门基础&#xff1a;WAV专题…...

爬虫:csv存储:写入和读取

目录 csv写入 csv读取 csv写入 import csv# data [ # (tf, 20, 180), # (dl, 20, 170), # (hc, 18, 190) # ] # header (姓名,年龄,身高) # # # csv写入数据会默认写一行隔一行 newline就是让它不要有空行 # with open(text.csv,w,encodingutf8,newline) as f:…...

Opencv-绘制几何图形

1. 绘制圆形 1.1 circle()函数原型 void cv::circle(InputOutputArray img, Point center, int radius, const Scalar & color, int thickness 1, int lineType LINE_8, int shift 0 ) img&#xff1a;需要绘制圆形的图像。 center&#xff1a;圆形的圆心位置坐标。 …...

ElasticSearch安装与集群部署

ElasticSearch安装与集群部署 很多小伙伴第一次接触ElasticSearch的时候是一脸愁容,这个东西他怎么用啊,不知道从哪里安装,那我们今天就着重从哪里下载?怎么下载?怎么安装?来研究一下吧! windows下载安装ElasticSearch 下载地址&#xff1a;https://www.elastic.co/cn/do…...

盘点12款企业常用源代码加密软件,源代码防泄密很重要!

在当今的商业环境中&#xff0c;源代码作为企业的核心资产之一&#xff0c;其安全性不容忽视。源代码的泄露可能导致企业丧失竞争优势、面临法律诉讼甚至经济损失。因此&#xff0c;选择合适的源代码加密软件成为企业保护知识产权和核心技术的关键步骤。 1. 安秉源代码加密软件…...

文件上传和下载

要想实现文件上传和下载&#xff0c;其实只需要下述代码即可&#xff1a; 文件上传和下载 import cn.hutool.core.io.FileUtil; import cn.hutool.core.util.StrUtil; import com.example.common.Result; import org.springframework.web.bind.annotation.*; import org.sprin…...

机械学习—零基础学习日志(高数22——泰勒公式理解深化)

核心思想&#xff1a;函数逼近 在泰勒的年代&#xff0c;如果想算出e的0.001次方&#xff0c;这是很难计算的。那为了能计算这样的数字&#xff0c;可以尝试逼近的思想。 但是函数又不能所有地方都相等&#xff0c;那退而求其次&#xff0c;只要在一个极小的范围&#xff0c;…...

Java | Leetcode Java题解之第318题最大单词长度乘积

题目&#xff1a; 题解&#xff1a; class Solution {public int maxProduct(String[] words) {Map<Integer, Integer> map new HashMap<Integer, Integer>();int length words.length;for (int i 0; i < length; i) {int mask 0;String word words[i];in…...

科普文:JUC系列之多线程门闩同步器Condition的使用和源码解读

一、概述 条件锁就是指在获取锁之后发现当前业务场景自己无法处理&#xff0c;而需要等待某个条件的出现才可以继续处理时使用的一种锁。 比如&#xff0c;在阻塞队列中&#xff0c;当队列中没有元素的时候是无法弹出一个元素的&#xff0c;这时候就需要阻塞在条件notEmpty上…...

Stable Diffusion绘画 | 图生图-基础使用介绍—提示词反推

按默认设置直接出图 拖入图片值图生图框中&#xff0c;保持默认设置&#xff0c;直接生成图片&#xff0c;出图效果如下&#xff1a; 因为重绘幅度0.7&#xff0c;所出图片与原图有差异&#xff0c;但整体的框架构图与颜色与原图类似。 输入关键词后出图 在正向提示词中输入…...

正点原子imx6ull-mini-Linux驱动之Linux SPI 驱动实验(22)

跟上一章一样&#xff0c;其实这些设备驱动&#xff0c;无非就是传感器对应寄存器的读写。而这个读写是建立在各种通信协议上的&#xff0c;比如上一章的i2c&#xff0c;我们做了什么呢&#xff0c;就是把设备注册成一个i2c平台驱动&#xff0c;这个i2c驱动怎么搞的呢&#xff…...

TypeScript 函数

函数是JavaScript应用程序的基础。 它帮助你实现抽象层&#xff0c;模拟类&#xff0c;信息隐藏和模块。 在TypeScript里&#xff0c;虽然已经支持类&#xff0c;命名空间和模块&#xff0c;但函数仍然是主要的定义 行为 的地方。 TypeScript为JavaScript函数添加了额外的功能&…...

C++ : namespace,输入与输出,函数重载,缺省参数

一&#xff0c;命名空间(namespace) 1.1命名空间的作用与定义 我们在学习c的过程中&#xff0c;经常会碰到命名冲突的情况。就拿我们在c语言中的一个string函数来说吧&#xff1a; int strncat 0; int main() {printf("%d", strncat);return 0; } 当我们运行之后&…...

目标检测 | yolov1 原理和介绍

1. 简介 论文链接&#xff1a;https://arxiv.org/abs/1506.02640 时间&#xff1a;2015年 作者&#xff1a;Joseph Redmon 代码参考&#xff1a;https://github.com/abeardear/pytorch-YOLO-v1 yolo属于one-stage算法&#xff0c;仅仅使用一个CNN网络直接预测不同目标的类别与…...

excel中有些以文本格式存储的数值如何批量转换为数字

一、背景 1.1 文本格式存储的数值特点 在平时工作中有时候会从别地方导出来表格&#xff0c;表格中有些数值是以文本格式存储的&#xff08;特点&#xff1a;单元格的左上角有个绿色的小标&#xff09;。 1.2 文本格式存储的数值在排序时不符合预期 当我们需要进行排序的时候…...

原神升级计划数据表:4个倒计时可以修改提示信息和时间,可以点击等级、命座、天赋、备注进行修改。

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><title>原神倒计时</title><style>* {margin: 0;padding: 0;box-sizing: border-box;body {background: #0b1b2c;}}header {width: 100vw;heigh…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...