国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<strike id="djihm"><s id="djihm"></s></strike>

<strong id="djihm"></strong>

<span id="djihm"></span>

【Vue3】keep-alive 緩存組件

2年前作者：謝爾登分類：Toy博客閱讀(18)違法舉報

這篇具有很好參考價值的文章主要介紹了【Vue3】keep-alive 緩存組件。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

當在 Vue.js 中使用 <keep-alive> 組件時，它將會緩存動態(tài)組件，而不是每次渲染都銷毀和重新創(chuàng)建它們。這對于需要在組件間快速切換并且保持組件狀態(tài)的情況非常有用。

<keep-alive> 只能包含（或者說只能渲染）一個子組件，如果需要包含多個子組件，需要用 v-if 選擇某個確定的組件進行渲染。也可以使用 <template> 或其他組件標簽將它們包裹起來，再通過 v-if 選擇確定的某個組件進行渲染。因此 keep-alive 標簽里面有且只有一個子節(jié)點（或者說只能渲染一個子節(jié)點）。這些子組件可以通過動態(tài)組件或者其他方式進行切換。

當一個被 <keep-alive> 組件包裹的組件被切換出去時，它的狀態(tài)將會被保留在內(nèi)存中，而不會被銷毀。當組件再次被切換回來時，它會從緩存中直接取出，并且保持之前的狀態(tài)。

1. keep-alive 和 v-show 的區(qū)別

作用：

<keep-alive>：用于緩存組件，以避免每次組件切換時銷毀和重新創(chuàng)建實例。它會保留組件的狀態(tài)，以便在需要時直接從緩存中取出。

v-show：用于根據(jù)條件動態(tài)顯示或隱藏組件。它通過控制 display CSS 屬性來決定組件是否在 DOM 中渲染。

使用場景：

<keep-alive>：適用于需要在組件間快速切換并保持組件狀態(tài)的場景。例如，當你有一個包含表單的編輯頁面，在切換到其他頁面并返回時，希望保留用戶已輸入的數(shù)據(jù)。

v-show：適用于根據(jù)某些條件動態(tài)顯示或隱藏單個組件。例如，根據(jù)用戶權(quán)限動態(tài)顯示不同的導航菜單。

對組件實例的影響：

<keep-alive>：保留組件的狀態(tài)和實例，只是保存虛擬 DOM ，以便在需要時直接從緩存中取出。組件的生命周期鉤子函數(shù) activated 和 deactivated 也會在緩存和激活時觸發(fā)。

v-show：每次切換顯示或隱藏時，組件實例會保持不變，存在于真實 DOM ，并且會觸發(fā)相應(yīng)的生命周期鉤子函數(shù) beforeUpdate 和 updated。

2. keep-alive 使用案例

App.vue

<template>
  <el-button type="primary" @click="flag = !flag"> 切換組件</el-button>
  <!-- [] 里面名稱是原本的組件名 -->
  <!-- 
    props介紹：
    :exclude="['A']"  不緩存A組件
    :include="['A']"  緩存A組件
    :max="2"  最多緩存2個，如有多個從后往前算起
   -->
  <keep-alive :exclude="['A']">
    <AVue v-if="flag"></AVue>
    <B v-else></B>
  </keep-alive>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import AVue from './components/A.vue'
import B from './components/B.vue'
const flag = ref<boolean>(true)
</script>

<style scoped></style>

A.vue

<template>
  <h1 style="margin: 10px;">我是A組件</h1>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

B.vue

<template>
  <h1 style="margin: 10px;">我是B組件</h1>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity count" prop="count">
      <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
            style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

【Vue3】keep-alive 緩存組件,Vue,緩存,vue.js,前端框架

3. 因注釋導致的意外錯誤

寫入注釋：
【Vue3】keep-alive 緩存組件,Vue,緩存,vue.js,前端框架

報錯：
【Vue3】keep-alive 緩存組件,Vue,緩存,vue.js,前端框架
因此 keep-alive 組件內(nèi)不要使用注釋，會被解析為子節(jié)點

解決方法：

keep-alive 內(nèi)部不寫注釋
使用 <template> 或其他組件標簽將它們包裹起來
- 此時可以認為利用了 keep-alive 標簽里面有且只有一個子節(jié)點（或者說只能渲染一個子節(jié)點）

  <keep-alive :exclude="['A']">
      <template v-if="flag">
        <!-- [] 里面名稱是原本的組件名 -->
        <AVue></AVue>
      </template>
      <template v-else>
        <B></B>
      </template>
  </keep-alive>

4. keep-alive 生命周期

<keep-alive> 組件提供了以下兩個主要的生命周期鉤子函數(shù)來管理緩存的組件：

activated：被緩存的組件激活時調(diào)用。
deactivated：被緩存的組件停用時調(diào)用。

App.vue

<template>
  <el-button type="primary" @click="flag = !flag"> 切換組件</el-button>

  <!-- 
    props介紹：
    :exclude="['A']"  不緩存A組件
    :include="['A']"  緩存A組件
    :max="2"  最多緩存2個，如有多個從后往前算起
   -->
  <keep-alive :exclude="['B']">
      <AVue v-if="flag"></AVue>
      <B v-else></B>
  </keep-alive>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AVue from './components/A.vue'
import B from './components/B.vue'

const flag = ref<boolean>(true)
</script>

<style scoped></style>

A.vue

<template>
  <h1 style="margin: 10px;">我是A組件</h1>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive,onMounted,onUnmounted,onDeactivated,onActivated } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}

onMounted(() => {
  console.log('初始化')
}),
onActivated(() => {
  console.log('keep-alive初始化')
})
onDeactivated(() => {
  console.log('keep-alive銷毀')
})
onUnmounted(() => {
  console.log('銷毀')
})
</script>

B.vue

<template>
  <h1 style="margin: 10px;">我是B組件</h1>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-form-item label="Activity name" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>
    <el-form-item label="Activity zone" prop="region">
      <el-select v-model="ruleForm.region" placeholder="Activity zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity count" prop="count">
      <el-select-v2 v-model="ruleForm.count" placeholder="Activity count" :options="options" />
    </el-form-item>
    <el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker v-model="ruleForm.date1" type="date" label="Pick a date" placeholder="Pick a date"
            style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker v-model="ruleForm.date2" label="Pick a time" placeholder="Pick a time" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form" prop="desc">
      <el-input v-model="ruleForm.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        Create
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string
  region: string
  count: string
  date1: string
  date2: string
  delivery: boolean
  type: string[]
  resource: string
  desc: string
}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

【Vue3】keep-alive 緩存組件,Vue,緩存,vue.js,前端框架
文章來源地址http://www.zghlxwxcb.cn/news/detail-645190.html

到了這里，關(guān)于【Vue3】keep-alive 緩存組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

VUE3，自定義控制keep-alive緩存
安裝插件 npm install vite-plugin-vue-setup-extend?--save 在vite.config.ts中 import VueSetupExtend from \\\'vite-plugin-vue-setup-extend\\\' ..... plugins：[ ? ? ? ? vue(), ????????VueSetupExtend(), ? ? ? ? ..... ] useKeepalive.ts import { ref } from \\\"vue\\\" export const includes = refstring[]([]); // 增加緩存 export function addKeepAliveC
2024年01月19日
瀏覽(31)
Vue中的keep-alive緩存組件的理解
keep-alive 是一個抽象組件，用于將其內(nèi)部的組件保留在內(nèi)存中，而不會重新渲染。這意味著當組件在keep-alive 內(nèi)部切換時，其狀態(tài)將被保留，而不是被銷毀和重新創(chuàng)建。 ?????????keep-alive用來緩存不經(jīng)常變化的組件，以提高性能，當我們在不同路由之間進行切換或者是動
2024年01月18日
瀏覽(37)
Vue路由組件的緩存keep-alive和include屬性
功能：瀏覽器頁面在進行切換時，原有的路由組件會被銷毀。通過緩存可以保存被切換的路由組件。例子：在頁面上填好的信息當進行頁面切換再轉(zhuǎn)回原來的頁面時，原本信息被清空了需要重新填寫功能：切換路由時，保留被切換路由組件。格式： keep-alive router-view/ keep-
2024年02月06日
瀏覽(24)
Vue3 除了 keep-alive，還有哪些實現(xiàn)頁面緩存的方法
有這么一個需求：列表頁進入詳情頁后，切換回列表頁，需要對列表頁進行緩存，如果從首頁進入列表頁，就要重新加載列表頁。對于這個需求，我的第一個想法就是使用keep-alive來緩存列表頁，列表和詳情頁切換時，列表頁會被緩存；從首頁進入列表頁時，就重置列表頁數(shù)
2024年02月06日
瀏覽(19)
Vue使用keep-alive設(shè)置哪些組件可以被緩存，哪些不被緩存
需求：當一個項目中，不是所有的組件頁面都需要緩存起來，因為有些頁面是不需要的 ? ?$route.meta.keepAlive 判斷當前組件是否有keepAlive屬性在路由js文件中在配置路由規(guī)則的時候配置 ?
2024年02月16日
瀏覽(16)
vue3.0中的keep-alive
keep-alive是vue中的一個內(nèi)置組件，通常用它來包裹一個動態(tài)組件，keep-alive 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。它有兩個特殊的生命周期鉤子 activated 和 deactivated ，在vue3.0里面生命周期函數(shù)前面都要加上on, onActivated , onDeactivated 。當組件在使用了kee
2023年04月08日
瀏覽(20)
keep-alive 是 Vue 的一個內(nèi)置組件，用于緩存其他組件的實例，以避免重復渲染和銷毀，它可以在需要頻繁切換的組件之間提供性能優(yōu)化
目錄 keep-alive? 使用 keep-alive 的示例代碼：手動清除組件緩存的示例代碼： keep-alive 組件有以下幾個優(yōu)點： keep-alive 的原理：使用 keep-alive 組件，你可以包裹需要緩存的組件，然后這些組件在切換時將會被緩存起來，而不是每次都重新創(chuàng)建。使用 keep-alive 的示例代碼：我們
2024年02月08日
瀏覽(25)
keep-alive組件緩存
從 a跳b，a已經(jīng)銷毀，b重新渲染；b跳a，b銷毀a重新渲染源組件銷毀，目標組件渲染組件緩存：組件實例等相關(guān)（ ?包括vnode ）存儲起來重新渲染指的是：把視圖重新編譯成新的vnode-dom?diff-渲染成真實dom 真實dom被我移除了只是從頁面上移除，只是把vnode重新渲染成真實dom或者
2024年01月21日
瀏覽(23)
vue3中keep-alive的使用及結(jié)合transition使用
在組件中使用（這里結(jié)合了 transition 內(nèi)置動畫組件）在router.js中配置 keepAlive 自定義屬性 VueCompilerError: expects exactly one child element or component. 不報錯，但 keep-alive 內(nèi)置組件的緩存沒有效果，onActivated 函數(shù)也不會執(zhí)行 vue中keep-alive的使用及詳解
2024年02月11日
瀏覽(19)
緩存滾動位置：解決keep-alive組件緩存滾動位置失敗問題
怎樣在vue中緩存組件？大家都知道，使用keep-alive組件即可，但是使用keep-alive緩存頁面后，發(fā)現(xiàn)雖然頁面緩存成功了，但是列表的滾動條又自動回到了最上方。是的， keep-alive組件是不會緩存滾動位置的。怎樣緩存滾動位置呢？這是我們這一章講的問題。核心思想是在路由
2024年02月16日
瀏覽(21)