＜router-view＞中key属性的作用

最新推荐文章于 2023-06-30 17:59:17 发布
最新推荐文章于 2023-06-30 17:59:17 发布
阅读量6.5k 收藏 14
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47267851/article/details/113260542
版权

<router-view>不设置key

首先，vue会复用相同组件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，这是因为不再执行created和mounted这些钩子函数，可以通过watch来监听$route的变化从而加载不同的组件

<router-view :key="$route.path">

通过设置key值为$route.path,因为子路由的path不同，从而避免了组件复用，子路由间来回切换时，页面都会重新加载.

遇到的问题
在后台系统中，点击侧导航菜单子菜单时，设置了:key="$route.path"会导致菜单关闭又打开，视觉效果不好，不设置key就实现组件复用，不会出现那个bug

键盘敲烂 月薪过万
关注
  • 5
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解如何理解vue的key属性
12-29
如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。 就地复用的弊端 这...
vue 页面tabs切换,替换iframe
10-25
<router-view :key="$route.meta.keepAlive"></router-view> </keep-alive> </div> </template> ``` 在对应的`AppNav.vue`组件中，我们可能会定义具体的Tab内容，每个Tab内容对应一个组件。这些组件可以设置`...
router-view上添加key和data-key的作用
stay hungry, stay foolish
06-30 813
key属性用于唯一标识路由组件，data-key属性可以用于存储自定义数据。
router-view的key属性解决路由更新问题
星辰的笔记
11-21 2118
router-view 作用， 你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。 <template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <router-view :key="key" /> </transition&g..
router-view 的key
周涛的博客
08-26 793
不设置 router-view 的 key 属性, 设置 router-view 的 key 属性值为 $route.path, 设置 router-view 的 key 属性值为 $route.fullPath
＜router-view :key=“key“/＞中key的作用
weixin_43206442的博客
01-07 2011
＜router-view :key=“key“/＞中key的作用
Vue--Router--＜router-view :key=“keyName“/＞中key的作用
IT利刃出鞘的博客
08-21 1531
本文介绍中key的作用。
router-view组件绑定key的作用、注意事项
m0_60692814的博客
07-01 2543
router-view组件有无key的区别（router-view已被keep-alive包裹）无key：不同路由配置的组件相同时，这些路由会共用同一个组件实例。（通常做法）有key：不同路由配置的组件相同时，每个路由对应一个自己的实例。（需要用一个组件配置多个路由，同时又希望这几个页面相互独立、互不影响）有key的常规写法： 有key的注意事项问题：这个有key的router-view可能会创建出多余的组件实例，导致内存泄漏。产生原因：新的路由导航结束时，如果这个有key的router-vie
vue-router二级导航切换路由及高亮显示的实现方法
10-16
最后，为了展示多路由区域，我们需要在主布局组件（如`App.vue`）中插入`<router-view>`。这样，当路由改变时，对应的组件将会在这个区域被渲染： ```html <!-- App.vue --> <template> <div id="app"> <Guide></...
ES5中实现路由vue-router，并用vue-resource请求数据
04-24
template: '<router-view></router-view>' }); ``` 这里的 `#app` 是 Vue 实例挂载的 DOM 元素，而 `<router-view>` 是路由视图组件，它会根据当前激活的路由来渲染对应的组件。 接下来，我们讨论如何使用 `vue...
世上最完整的vuerouter配置demo
08-09
4. **命名路由与命名视图**：为路由指定名称，便于在模板中通过`<router-link>`和`<router-view>`组件的`to`属性引用。同时，多个`<router-view>`可以用来实现并行显示的视图。 5. **查询参数**：在URL中以`?key=...
router-view 的key属性
Amos的博客
11-08 3912
router-view 的key属性 不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据 相...
vue中router-view的key设置
weixin_39720896的博客
05-27 1965
1.设置 router-view 的 key 属性值为 route.fullPath从/page?id=1=>/page?id=2,因为这两个路由的route.fullPath 从/page?id=1 => /page?id=2, 因为这两个路由的route.fullPath从/page?id=1=>/page?id=2,因为这两个路由的route.fullPath不一样, 所以组件被强制不复用, 因此钩子加载顺序: beforeRouteUpdate => created
vue-router key属性
meng16的博客
08-23 1812
在项目进行中，有一个功能是需要在本页跳转，只是参数的不同，可是由于页面不会刷新，故而找了很多方法，:key属性完全解决我的问题了 <template> <div class="bulletin-board"> <router-view :key="$route.fullPath" /> </div> </template> 贴一个官网的path 和fullpath的路由对象属性 $route.path 类型: string
vue-router router-view 的 key属性
wyqvong的博客
04-04 4682
<template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <router-view :key="key" /> //key属性 </transition> </section>...
还不知道router-view中的key=‘$route.fullPath‘吗
...
10-05 2922
router-view中的key='$route.fullPath'
Vue中如何给router-view设置key值
weixin_37834123的博客
08-30 3406
key的作用 由于 Vue 会复用相同组件, 所以当同一个组件不同路由发生跳转时将不在执行created, mounted之类的钩子函数 , 设置key之后会在虚拟DOM阶段比对跳转前后得key值,如果不同则重新销毁重建页面 key的属性值 key属性值为 $route.path <router-view :key="$route.path"/> 1.当路由地址变化为 /category/sub1 ==> /category/sub2时 由于这两个路由的$rou
何时需要给router-view组件绑定 key
林雨静
11-20 9303
由Vue文档-动态路由匹配部分可知： 当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象或使用 2.2 中引入的 beforeRoute...
<div class="router" :data-keepAlive="$route.meta.keepAlive" > <breadcrumb class="breadcrumb" /> <keep-alive> <router-view :key="$route.path"></router-view> </keep-alive> <!-- <keep-alive v-if="$route.meta.keepAlive"> <router-view :key="$route.path"></router-view> </keep-alive> <router-view :key="$route.path" v-else ></router-view> --> </div>实现页面缓存，但是我想让$route.meta.keepAlive为true时才缓存 改为了 <div class="router" :data-keepAlive="$route.meta.keepAlive" > <breadcrumb class="breadcrumb" /> <!-- <keep-alive> <router-view :key="$route.path"></router-view> </keep-alive> --> <keep-alive v-if="$route.meta.keepAlive"> <router-view :key="$route.path"></router-view> </keep-alive> <router-view :key="$route.path" v-else ></router-view> </div>但是缓存失效
最新发布
07-25
根据您提供的代码片段，您想要实现的是根据 `$route.meta.keepAlive` 的值来决定是否缓存 `router-view` 组件。在您的修改中，您想要在 `$route.meta.keepAlive` 为 `true` 时才缓存 `router-view` 组件。 根据您的描述，缓存似乎没有起作用。有几个可能的原因导致缓存失效： 1. `$route.meta.keepAlive` 的值没有正确设置为 `true`。请确保在路由配置中正确设置了 `meta` 字段，以及在对应的路由对象中将 `keepAlive` 设置为 `true`。 2. 使用了相同的 `:key`。在您的代码中，`<router-view>` 组件和 `<keep-alive>` 组件都使用了 `$route.path` 作为 `:key`。这会导致两个组件具有相同的 `:key`，从而导致缓存失效。您可以尝试将 `<keep-alive>` 组件的 `:key` 设置为不同的值，例如使用一个固定的字符串。 下面是您修改后的代码片段，我对其中的一些地方进行了注释，希望能帮助您解决问题： ```html <div class="router" :data-keepAlive="$route.meta.keepAlive"> <breadcrumb class="breadcrumb" /> <!-- 取消下面的注释，并删除上面的 <keep-alive> 组件 --> <!-- <keep-alive> <router-view :key="'cached-' + $route.path"></router-view> </keep-alive> --> <!-- 取消下面的注释，并删除上面的 <router-view> 组件 --> <!-- <keep-alive v-if="$route.meta.keepAlive"> <router-view :key="'cached-' + $route.path"></router-view> </keep-alive> --> <!-- 取消下面的注释，并删除上面的 <router-view> 组件 --> <!-- <router-view :key="'non-cached-' + $route.path"></router-view> --> </div> ``` 请注意，根据您的实际需求，您可能需要根据不同的情况来使用不同的缓存策略。以上代码片段提供了一种思路，但具体实现可能需要根据您的项目结构和需求进行调整。希望这能帮助到您！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值