每天10个vue面试题(七)

1、Vue如何监听页面url中hash变化?

  • 监听 $route 的变化:在Vue中,你可以使用watch属性来监听$route的变化。当路由发生变化时,会执行相应的处理函数。
  • 使用 window.location.hash:直接读取window.location.hash的值。这个属性可读可写。绑定一个hashChange事件即可监听到。

2、$route 和 $router 的区别?

  • $route 和 $router 是Vue Router提供的两个对象。
  • $route 是一个只读对象,代表了当前活动的路由信息,包括路径、参数、查询字符串等。它用于获取路由的信息。
  • $router 是 Vue Router 的实例,提供了一些方法用于导航路由,如 push、replace 和 go。它用于在应用程序中进行路由导航操作

3、params和query的区别?

  • params 是通过路径的一部分来传递参数,用于捕获和处理特定的路由请求。参数是必需的,出现在路径中,可以通过 $route.params 访问。
  • query 是通过查询字符串来传递参数,用于配置和过滤路由请求。参数是可选的,出现在 URL 的查询字符串中,可以通过 $route.query 访问。
  • 总结:监听 hashchange 事件可获取页面哈希的变化;$route 用于获取当前路由信息,$router 用于进行路由导航;params 通过路径传递参数,query 通过查询字符串传递参数。

4、刷新页面时,params和query的差异?

  • 对于params,当页面刷新时,参数会丢失,因为参数只存在于URL路径中,并不会被浏览器记忆。
  • 对于query,当页面刷新时,参数不会丢失,因为参数是作为查询字符串出现在URL中,浏览器会自动保留这些参数。

5、Vue-router你们用的哪个版本?

v3和v4版本都用了,老项目使用了vue2 + vue-router3.x,新项目使用vue3 + vue-router4.x


6、Vue动态路由传参有几种方法?

  • 动态路由:就是不确定的路由,需要传递动态参数来拼接为真实的路由
  •       1. params 方式
  • 配置路由格式:/router/:id
  • 传递的方式:在path后面跟上对应的值
  • 传递后形成的路径:/router/123
  •       2. query 方式
  • 配置路由格式:/router,也就是普通配置
  • 传递的方式:对象中使用query的key作为传递方式
  • 传递后形成的路径:/route?id=123

7、Vue动态路由传参具体用法?

params 方式具体用法:
      1. 路由定义
      // 在APP.vue中
      <router-link :to="'/user/'+userId" replace>用户</router-link>    
      
      //在index.js
      {
         path: '/user/:userid',
         component: User,
      },
      2. 路由跳转
      // 方法1:
      <router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link
      // 方法2:
      this.$router.push({name:'users',params:{uname:wade}})
      // 方法3:
      this.$router.push('/user/' + wade)
      3. 参数获取:通过 $route.params.userid 获取传递的值
query 方式具体用法:
      1. 路由定义
      //方式1:直接在router-link 标签上以对象的形式
      <router-link :to="{ path: '/user', query: { name: 'tom', age: 18 }}"></router-link>

      // 方式2:写成按钮以点击事件形式
      this.$router.push({
        path: "/user",
        query: {
          name: "tom",
          age: "18",
        }
      })
      2. 跳转方法
      // 方法1:
      <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
      // 方法2:
      this.$router.push({ name: 'users', query:{ uname:james }})
      // 方法3:
      <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
      // 方法4:
      this.$router.push({ path: '/user', query:{ uname:james }})
      // 方法5:
      this.$router.push('/user?uname=' + jsmes)
      3. 参数获取:通过$route.query 获取传递的值


8、Vue-router 路由钩子函数有哪些?

  •       简单的回答:
  • 全局前置/钩子:beforeEach、beforeResolve、afterEach
  • 路由独享的守卫:beforeEnter
  • 组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
  •       详细的回答:
  •       1. 全局有三个路由钩子:
  • outer.beforeEach:全局前置守卫 进入路由之前,接收参数(to, from, next)
  • router.beforeResolve:全局解析守卫在 beforeRouteEnter 调用之后调用,接收参数(to, from, next)
  • router.afterEach:全局后置钩子 进入路由之后调用,接收参数(to, from)
  •       2. 路由独享的守卫
  • 可以在路由配置上直接定义 beforeEnter 守卫
  •       3. 组件内的守卫
  • beforeRouteEnter:在渲染该组件的对应路由被 confirm 前调用,不能获取组件实例this,因为当守卫执行前,组件实例还没被创建
  • beforeRouteUpdate (2.2 新增):在当前路由改变,但是该组件被复用时调用,可以访问组件实例this
  • beforeRouteLeave:导航离开该组件的对应路由时调用,可以访问组件实例this

9、导航守卫,完整的导航解析流程?

  • 导航被触发。
  • 在失活的组件里调用 beforeRouteLeave 守卫。
  • 调用全局的 beforeEach 守卫。
  • 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  • 在路由配置里调用 beforeEnter。
  • 解析异步路由组件。
  • 在被激活的组件里调用 beforeRouteEnter。
  • 调用全局的 beforeResolve 守卫 (2.5+)。
  • 导航被确认。
  • 调用全局的 afterEach 钩子。
  • 触发 DOM 更新。
  • 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

10、路由守卫:参数 to、from、next 的含义?

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  •  next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

      

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

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

相关文章

C++ -- 模板进阶

非模板类型参数 模板参数分为类型形参与非类型形参。类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class 或 typename之类的参数类型名称。非类型形参&#xff1a;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中将该参数当成常量来使用。…

今日 AI 简报|零样本视频生成、移动端轻量语言模型、自动驾驶多模态模型等前沿 AI 技术集中亮相

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

SQL中的IN语句和EXISTS语句

大家好&#xff0c;使用SQL时经常需要根据其他表的值过滤数据&#xff0c;常见方法是使用IN和EXISTS子句。这两者都用于检查子查询中值的存在&#xff0c;但它们的工作方式略有不同&#xff0c;并可能对性能产生不同影响。本文将探讨IN和EXISTS的定义、工作原理及其使用场景&am…

【解决方案】Mac上禁止chrome自动更新的三种方法

【目的需求】 新版chrome直接用打印机打印页面时&#xff0c;打印任务总是响一下就消失了&#xff0c;使用safari浏览器无此问题&#xff0c;使用早期版本chrome也没有这一问题。因此想固定chrome版本&#xff0c;不要自动更新。尝试了网上的多种方法均失败。 【解决方案】 …

【运维管理】如何像管理linux一样,批量管理windows主机

很多小伙伴在维护的时候也会难免遇见批量的windows操作&#xff0c;那么一定有人就会问是否有方法可以用命令来批量操作windows主机&#xff0c;其实非常简单&#xff0c;windows早就为我们提供了一个内置的批量管理工具&#xff0c;那就是这个强大的POWERSHELL&#xff0c;今天…

如何监控员工上网行为?实现精准监控员工上网行为的5个妙招分享!(企业:稳了!)

如何监控员工上网行为&#xff1f; 员工上班时的"摸鱼"行为员工上网行为&#xff08;做与工作无关的活动&#xff0c;如浏览社交媒体、游戏、网购等&#xff09;&#xff0c;不仅影响工作效率&#xff0c;还可能破坏团队氛围&#xff0c;阻碍企业发展。 那么&#…

迷茫内耗的一天

迷茫的一天 今天看了看动态规划&#xff0c;不知不觉看了三四个小时&#xff0c;英语也没背&#xff0c;项目也已经停止了一个星期就看了几个小时的xml文件(不停ctrlB)&#xff0c;好累&#xff0c;感觉要学的好多。这难道是必经之路吗&#xff1f; 一个星期算法已经刷了40道题…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布&#xff0c;这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具&#xff0c;能将简单的文字提示转化为高质量的视频短片&#xff0c;为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

<项目代码>YOLOv8 猫狗识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。 关键词 Canvas 组件复杂路径绘制渐变填充一、Canvas 的复杂路径绘制 Canvas 提供了…

Java 用户随机选择导入ZIP文件,解压内部word模板并入库,Windows/可视化Linux系统某麒麟国防系统...均可适配

1.效果 压缩包内部文件 2.依赖 <!--支持Zip--><dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>2.11.5</version></dependency>总之是要File类变MultipartFile类型的 好像是…

mint-ui Picker 显示异常

mint-ui Picker 显示异常 现象 最近一个老项目页面显示异常&#xff0c;使用mint-ui Picker显示异常,直接显示成了 数据对象&#xff0c;而不是具体travelName 字段 组件 mint-ui Picker 使用方式(vue方式) // template <mt-picker :slots"slots" value-key…

【重生之我要苦学C语言】深入理解指针2

深入理解指针2 const修饰指针 当const修饰变量时&#xff0c;是无法更该该变量的值的 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() {const int a 10;//const常属性&#xff0c;不能改变的属性a 1;printf("%d\n", a);return 0; }报错&…

TVM前端研究--Pass

文章目录 TVM 中 Pass 分类Pass Infrastructure后端主要数据结构前端数据结构Pass 注册机制注册流程AI 编译器一般采用多级 IR 的架构来处理深度学习模型,不同级别的 IR 包含不同层级的信息。比如,越靠近前端的 IR 一般不包含硬件的信息,越靠近后端,IR 所含信息则与硬件愈相…

半参数模型

4. 半参数模型 (Semi-parametric Model) 半参数模型结合了参数化和非参数化的方法。可以在整体上采用线性回归&#xff0c;但在局部允许非线性变化。这样做的目的是在保持模型的线性解释性的同时&#xff0c;捕捉细微的弧度趋势。 例如&#xff0c;可以定义&#xff1a; y …

终于弄懂了Python字符串的操作

字符串的操作 在 Python 中&#xff0c;字符串不仅是存储文本的工具&#xff0c;还提供了多种操作来处理和管理这些文本数据。通过掌握字符串的各种操作&#xff0c;程序员可以更加灵活地处理信息&#xff0c;实现不同的需求。以下将详细介绍字符串的常见操作&#xff0c;包括…

LInux系统编程(二)操作系统和进程

目录 一、前言&#xff1a;冯诺依曼体系结构 1、图中各个单元的介绍 2、值得注意的几点 二、操作系统 1、操作系统分层图 2、小总结 三、 进程&#xff08;重点&#xff09; 1、进程的基本概念 2、存放进程信息的数据结构——PCB&#xff08;Linux 下称作 task_struct…

加法电路和减法电路

一、加法电路 下边为加法电路的拓扑结构 加法电路作用1: 直流量叠加 如上图仿真所示,利用放大器LM324AD进行加法电路的仿真,输入为直流+1V和直流+2V,经过加法运算,根据上边Uo的计算公式进行计算,可得Uo=-3V,和仿真结果保持一致。如下图所示。 加法电路作用2: 信号叠加…

Kafka系列之:对做了条带划分的Kafka节点磁盘实现扩容的技术方案

Kafka系列之:对做了条带划分的Kafka节点磁盘实现扩容的技术方案 一、查看磁盘条带扩容情况二、查看逻辑卷及其关联的物理卷和逻辑卷快照三、显示文件系统磁盘空间使用情况及文件系统类型四、对每块盘扩容五、更改物理卷的大小六、扩展逻辑卷七、扩展XFS文件系统的大小八、扩容…

8. 数据结构——邻接表、邻接矩阵的基本操作

一、邻接表 1. 内容 2. 实现代码(直接可以复制使用) //邻接表的相关操作 #include<bits/stdc.h> #define MVnum 100 #define OK 1 #define ERROR -1 using namespace std;typedef int Status; typedef char VerTexType; //假设顶点的数据类型为char typedef int ArcT…