zoukankan      html  css  js  c++  java
  • VUE router-view key 属性解释

    router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的。

    <template>
      <section class="app-main">
        <transition name="fade-transform" mode="out-in">
          <router-view :key="key" />
        </transition>
      </section>
    </template>
    
    <script>
    export default {
      name: 'AppMain',
      computed: {
        key() {
          return this.$route.fullPath
        }
      }
    }
    </script>

    这里router-view 有一个key的属性,这个key的属性作用是:

    1. 不设置 router-view 的 key 属性

    由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子, 这时候你需要在路由组件中, 添加beforeRouteUpdate钩子来执行相关方法拉去数据

    相关钩子加载顺序为: beforeRouteUpdate

    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 属性值为 $route.fullPath

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

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

  • 相关阅读:
    Count the Colors---zoj1610线段树
    统计难题---hdu1251字典树模板
    Mayor's posters---poj2528线段树、离散化
    I Hate It---hdu1754线段树
    敌兵布阵---hud1166(线段树或者树状数组模板)
    A Simple Problem with Integers---poj3468线段树
    STL的Vector介绍
    STL的Deque介绍
    索尼高清影视技术学院参观观后感
    RTSP协议学习笔记
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/10867617.html
Copyright © 2011-2022 走看看