vue中router-view的key设置

已于 2023-04-24 17:24:40 修改
阅读量1.9k 收藏 2
点赞数
文章标签： vue.js 前端 javascript
于 2022-05-27 17:17:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39720896/article/details/125007651
版权

1.设置 router-view 的 key 属性值为 $route.fullPath

从/page?id=1 => /page?id=2, 因为这两个路由的$route.fullPath不一样, 所以组件被强制不复用, 因此钩子加载顺序: beforeRouteUpdate => created => mounted（通过绑定一个fullPath，可以识别当前页面路由的完整地址，当地址发生改变(包括参数改变)则重新渲染页面(例如动态路由参数的变化）

2.设置 router-view 的 key 属性值为 $route.path

从/page/1 => /page/2, 因为这两个路由的$route.path不一样, 所以组件被强制不复用, 相关钩子加载顺序为: beforeRouteUpdate => created => mounted

从/page?id=1 =>> /page?id=2, 由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件, 相关钩子加载顺序为: beforeRouteUpdate

3.不设置 router-view 的 key 属性
由于 Vue 会复用相同组件, 即 /page/1 =>> /page/2 或者 /page?id=1 =>> /page?id=2 , 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据，相关钩子加载顺序为: beforeRouteUpdate

棋棋可可
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES5中实现路由vue-router，并用vue-resource请求数据
04-24
在 ES5 中设置 `vue-router`，我们需要以下几个步骤： 1. **安装和引入**：通过 npm 或者直接在 HTML 文件中引入 `vue-router` 的 CDN 链接。如果是本地安装，可以使用： ```bash npm install vue-router --save ...
vue 页面tabs切换,替换iframe
10-25
下面将详细介绍如何使用`vue-router`的`router-view`和`keep-alive`来实现这一目标。 首先，Vue Router是Vue.js官方推荐的路由管理器，它能够帮助我们管理应用程序的各个视图组件，并根据URL路径进行相应的组件切换...
vue3 路由缓存问题（三种方法）
团酱
08-17 4459
vue3路由缓存：当用户从/users/johnny导航到/users/jolyne时，相同的组件实例被重复使用。由于两个路由都渲染相同的组件，比起销毁再创建，复用是比较高效的，但是这也会导致组件的生命周期狗子不会被调用根据小仙兔项目进行代码编辑。
vue3-解决路由缓存问题-方案一：使用key；方案二：使用onBeforeRouteUpdate
qq_45811054的博客
05-30 4736
vue3-解决路由缓存问题：方案一：使用key；方案二：使用onBeforeRouteUpdate 当用vue3开发页面的时候，需要对不同页面的组件进行路由跳转，相同的组件实例将会被复用。因为这些路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会被调用。
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
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=‘$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
vue-router二级导航切换路由及高亮显示的实现方法
10-16
最后，为了展示多路由区域，我们需要在主布局组件（如`App.vue`）中插入`<router-view>`。这样，当路由改变时，对应的组件将会在这个区域被渲染： ```html <!-- App.vue --> <Guide></Guide> <router-view /> ...
详解vue-router 动态路由下子页面多页共活的解决方案
10-15
const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } ] }); ``` `User` 组件通常会根据 `id` 参数获取并显示用户信息： ```vue <div>{{ user.name }} export ...
vue路由--网站导航功能详解
10-17
安装完成后，你需要在项目中引入 Vue 和 Vue Router，并通过 `Vue.use(VueRouter)` 来启用它。 2. 配置 Vue Router： 在 Vue 项目中创建一个专门的 `router.js` 文件，用来定义路由规则。这里通常会导入 Vue、Vue...
＜router-view :key=“key“/＞中key的作用
weixin_43206442的博客
01-07 2011
＜router-view :key=“key“/＞中key的作用
vue-强制刷新组件-改变组件的key
weixin_49623618的博客
05-01 2054
当你想要强制刷新一个组件的时候，可以改变这个组件的key值。 <template> <my-component :key="key"></my-component> </template> <script> export default { data(){ return{ key:new Date().getTime(); } } watch：{
vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结
weixin_34355715的博客
05-07 1057
　　vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 　　对于路由，不同的路由跳转，vue会帮我们刷新路由，但是我今天要说的是，同一...
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
router-view :key=“$route.fullPath“
最新发布
Ryan-Yu的博客
04-03 528
是Vue Router提供的一个特殊的组件，它的作用是根据当前浏览器的URL路由来决定显示哪个组件的内容。它使得您可以在Vue.js应用中实现单页应用的路由功能，从而根据不同的URL显示不同的页面内容，而无需每次加载新的HTML页面。这样做的好处是可以确保在路由切换时，旧的组件实例被销毁，新的组件实例被创建，从而避免了可能出现的因为路由切换而导致的组件状态混乱或不更新的问题。组件的key值，我们可以告诉Vue.js在每次路由切换时，都要将对应的组件视为一个新的组件来处理，而不是复用之前的组件实例。
Vue3的vue-router路由详解
热门推荐
月影WEB的博客
05-16 3万+
这篇文章是接着【三分钟快速搭建Vue3+webpack项目】的内容做的开发，有基础的可以跳过【三分钟快速搭建Vue3+webpack项目】，直接看以下的内容。 Vue3的vue-router路由详解： 首先安装路由依赖模块： npm install vue-router@4 所需代码文件如下图： 图1 所需要的主要文件：index.html、index.js、App.vue index.html：模板页面，项目中的代码编译之后都是放入到模板页面中id为app的元素这种。 代码如下：..
vue3配置router路由并实现页面跳转
Gemini仔仔的专栏
04-23 8919
但是history也是有缺点的，不怕前进后退跳转，就怕刷新（如果后端没有准备的话），因为刷新是实实在在地去请求服务器了。ps：引入文件时记得新建view文件夹以及里面的A、B.vue两个页面。与之对应的，通过点击链接实现导航的方式，叫做声明式导航。通过调用 API 实现导航的方式，叫做编程式导航。2.1文件中引入vue方法、配置页面具体路径。vue-router 中的编程式导航 API。1. 普通网页中点击。// 第二种跳转方法。
VUE3路由缓存 router-view和keep-alive
weixin_41572561的博客
12-16 981
VUE3 路由缓存
router-view key
08-06
router-view key 是在 Vue Router 中使用的一个特殊的属性。它用于在多个 router-view 组件之间标识不同的视图。 在 Vue Router 中，我们可以定义多个 router-view 组件用来渲染不同的路由视图。而当我们进行路由切换时，如果没有指定 key 值，Vue 默认会复用已经存在的组件实例。这就导致了在切换路由时，组件的状态（包括数据、方法等）并不能重新初始化，从而可能导致错误或意外的行为。 使用 key 属性，我们可以为每个 router-view 组件指定一个唯一的标识值。这样，在路由切换时，Vue 将会根据 key 的变化创建新的组件实例，而不是复用已有的组件。这样可以确保每个路由视图都能够重新初始化，避免了错误或意外的发生。 key 的取值可以是任意类型的值，只要保证不同的视图拥有不同的 key 值即可。通常可以使用路由的名称或者路由参数来作为 key 值。当匹配到具有不同 key 值的路由时，Vue Router 将会创建一个新的组件实例来渲染对应的视图。 总结来说，router-view key 是用于在 Vue Router 中标识不同视图的属性。通过为每个 router-view 组件指定不同的 key 值，我们可以确保每个路由视图都能够重新初始化，从而避免了潜在的错误和问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值