首页 > 其他分享 >Vue router-view key 导致路由切换非router-view部分也进行刷新

Vue router-view key 导致路由切换非router-view部分也进行刷新

时间:2023-07-02 13:22:46浏览次数:48  
标签:Vue key 组件 router page 路由 view

<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。

 

如果中最外层的<router-view>中增加了:key="$route.fullPath", 会导致子路由中的router-view之外的部分也会被重新渲染,key值的使用应该考虑不干扰其他组件渲染的前提下去添加,例如header组件

// 这个是根路由,下面有包含header的子路有,每次切换路由,header都会被同步刷新
<transition name="fade">
  <router-view :key="$route.fullPath" /> 
</transition>
// 子路由
<Header />
<router-view />

 

key值添加是为了以下几点

1. 不设置 router-view 的 key 属性由于 Vue 会复⽤相同组件,即 /page/a => /page/b 或者 /page?id=a => /page?id=b 这类链接跳转时,将不再执⾏ created , mounted 之类的钩⼦,这时候你需要在路由组件中,添加beforeRouteUpdate 钩⼦来执⾏相关⽅法拉取数据。

2. 设置 router-view 的 key 属性值为 $route.path从 /page/a => /page/b ,由于这两个路由的 $route.path 并不⼀样,所以组件被强制不复⽤,相关钩⼦加载顺序为 beforeRouteUpdate => created => mounted

3. 设置 router-view 的 key 属性值为 $route.fullPath从 /page/a => /page/a ,由于这两个路由的 $route.fullPath 并不⼀样,所以组件被强制不复⽤,相关钩⼦加载顺序为beforeRouteUpdate => created => mounted

4. 从 /page?id=a => /page?id=b ,由于这两个路由的 $route.fullPath 并不⼀样,所以组件被强制不复⽤。

标签:Vue,key,组件,router,page,路由,view
From: https://www.cnblogs.com/roland-sky/p/17520674.html

相关文章

  • 自定义MultipleViewResolver
    1.MultipleViewResolver.javaimportjava.util.Locale;importjava.util.Map;importorg.springframework.web.servlet.View;importorg.springframework.web.servlet.ViewResolver;publicclassMultipleViewResolverimplementsViewResolver{privateMap<St......
  • vue2 input和select无法正常回显
    背景:使用vue进行对象赋值,如果是一个未在data声明的属性,会导致双向绑定无法正常回显。<template><div><div><labelfor="">姓名</label><inputv-model="info.name"type="text"></div><div>......
  • 光脚丫思考Vue3与实战:第03章 Vue实例
    下面是本文的屏幕录像的在线视频:03-Vue实例04-生命周期示意图+钩子函数温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:03-Vue实例:https://pan.baidu.com/s/1O9lUFm2jRIlBeFrBjXPZIA 提取码:nbzt03-生命周期示意图+钩子函数:https://pan.baidu.com/s/1D4ndTSgPBNGE8D4_......
  • 光脚丫思考Vue3与实战:第02章 安装Vue.js
    下面是本文的屏幕录像的在线视频:02-安装Vue.js温馨提示:1、视频下载:线上视频被压缩处理,可以下载高清版本:https://pan.baidu.com/s/16594YUpNNrkjZfrCx7e5kQ 提取码:hws62、示例代码:https://pan.baidu.com/s/1oYV0Lej_E3ufyEUMxq1S2Q 提取码:ikhe 下图是文章大纲: 一、概述Vue.js......
  • 03-Vue.js环境准备-使用vue-cli快速搭建项目(cli3+)
    一、文章大纲二、安装环境本文基于如下的环境进行试验的:Windows10中文64位专业版。v12.18.3版本的Node.js。@vue/cli4.5.4的Vue.js和cli。三、安装vue-cli使用npm全局安装vue-cli:npminstall-g@vue/cli可以使用如下的创建项目的命令,查看vuecli的安装情况:按照上面的提示,先卸载......
  • 前端Vue自定义注册界面模版 手机号邮箱账号输入框 验证码输入框  包含手机号邮箱账号
    前端Vue自定义注册界面模版手机号邮箱账号输入框验证码输入框 包含手机号邮箱账号验证,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13306效果图如下:......
  • 前端Vue基于腾讯地图Api实现的选择位置组件 返回地址名称详细地址经纬度信息
    前端Vue基于腾讯地图Api实现的选择位置组件返回地址名称详细地址经纬度信息, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13310效果图如下:使用方法<!--leftTitle:左边标题name:输入框名字value:输入框选择值 placeholder:占位符@clic......
  • vue 学习
    1.vue基础2.vue-cli3.vue-router4.element-ui5.vue3vue是什么?是一套用于构建用户界面的渐进式(vue可以自底向上的逐层的应用简答应用只需要一个轻量小巧的核心库复杂应用可以引入各式各样的vue插件)的javascript的框架。尤雨溪开发的。vue特点1.组件化模式,提高......
  • Vue:组件拖拽
    vue-drag-resize组件拖拽库vue-drag-resize支持拖拽和缩放两个大动作,轻量级,无依赖,功能扎实,适合需要缩放的应用场景。无依赖,轻量级操作可联动支持触摸,对移动端友好元素可定义拖拽及缩放可限制拖拽的最大或最小值可限制拖动的方向按照文档安装并引入之后,报错:Couldnotfi......
  • Vue:$parent
    什么是$parent在Vue.js中,this.$parent是组件实例的一个属性,用于访问当前组件的直接父组件实例。它提供了一种在子组件中与父组件进行通信和交互的方式。当一个组件被创建时,Vue.js会在内部为该组件创建一个组件实例,并建立组件之间的父子关系。每个组件实例都具有$parent属......