如何通过HTML按钮或其他Vue组件点击实现跨页面加载Vue组件？

你目前打算用原生HTML按钮触发加载、硬写<add-price>组件标签的方案，在跨页面场景下基本不可行：纯静态HTML标签没有和Vue响应式体系打通，硬写在页面结构里的<add-price>会在Vue实例挂载时直接渲染，没法实现“点击按钮才触发加载、跨页面按需获取组件实例”的目标，而且多页跳转时Vue运行时会被完全重置，没有绑定事件的原生按钮也没法直接操作跨页面的组件状态。

多页应用（MPA）场景实现 #

• 把原生按钮接入Vue事件绑定体系，通过跳转传参+本地存储的方式打通跨页面的状态传递：
  给原来的静态a标签绑定Vue点击事件，点击时把需要加载组件的标记存在会话存储中，再跳转到目标页面：

<!-- 原来的静态a标签改造，接入Vue事件 -->
<a class="contentButton ml-n5" id="addCategoryPrice" @click="jumpToPricePage">
  Add Price<i class="fa fa-plus-circle"></i>
</a>

// 页面级Vue实例的方法实现
methods: {
  jumpToPricePage() {
    // 写入单次生效的加载标记
    sessionStorage.setItem('loadAddPrice', '1')
    // 执行页面跳转
    window.location.href = '/你的目标页面路径'
  }
}

• 目标页面不要硬写<add-price>标签，改成响应式条件渲染逻辑：
  在页面初始化时读取会话存储里的加载标记，标记为真时才渲染组件，渲染完成后清除标记避免下次进入页面重复加载：

data() {
  return {
    showAddPrice: false
  }
},
mounted() {
  // 读取加载标记
  this.showAddPrice = sessionStorage.getItem('loadAddPrice') === '1'
  // 清除残留标记
  sessionStorage.removeItem('loadAddPrice')
}

<!-- 替换原来硬写的<add-price>标签，加条件判断 -->
<add-price v-if="showAddPrice"></add-price>

单页应用（SPA）场景实现 #

• 不需要手动操作会话存储，直接借助Vue Router的导航能力实现：

1. 给按钮绑定路由跳转逻辑，在跳转的query参数里携带需要加载add-price组件的标记
2. 目标页面组件在挂载阶段读取路由参数，控制组件的按需渲染
3. 如果组件是全局通用的模块，甚至可以直接把add-price配置成目标页面的嵌套子路由，点击按钮跳转路由时就会自动渲染对应组件，完全不需要手动维护状态

• 不要把<add-price>直接硬写在页面静态结构里没有任何条件控制，这类硬写的标签会在Vue挂载时自动完成渲染，没法实现“点击后才加载”的效果
• 跨页面传递加载状态优先用sessionStorage而非localStorage，后者会长期残留状态，容易出现用户关闭页面后再打开时组件莫名其妙自动加载的问题

内容的提问来源于stack exchange，提问作者Jounior Developer