router-view 和 router-link 跳转加载是刷新本页面还是局部，示例区别对比

在Vue.js应用中，<router-view>和<router-link>是两个核心组件，用于实现单页面应用（SPA）内的路由跳转与视图渲染。以下是关于它们跳转加载行为的详细解释及示例对比：

默认行为

1. <router-view>

   • 局部刷新：作为路由出口，它会根据当前匹配的路由动态渲染对应的组件内容，而不会刷新整个页面。这是SPA的核心特性之一，通过异步加载和替换部分DOM来实现视图切换，提升了用户体验并减少了服务器压力。
   • 示例：假设有一个主布局文件（如App.vue），其中包含多个区域，其中一个用<router-view/>占位。当点击不同的导航链接时，只有这个占位符内的内容会发生变化，其他部分保持不变。

2. <router-link>

   • 局部刷新：同样遵循SPA的原则，点击该组件生成的链接会触发路由变化，进而更新<router-view>中的内容，但不会重新加载整个页面。这是Vue Router设计的默认行为，旨在优化性能和交互流畅度。
   • 示例：使用<router-link to="/about">About Us</router-link>创建指向“关于我们”页面的链接。点击后，浏览器地址栏更新为/about，同时<router-view>展示对应的About组件，其余页面元素保留原样。

特殊情况下的全页刷新

虽然两者默认都是局部刷新，但在特定需求下可以实现类似全页刷新的效果：

1. 强制刷新技巧

   • 为<router-view>设置key属性：通过绑定:key="$route.fullPath"，每当路由完整路径改变时，Vue会视为新组件实例化，从而强制重新渲染。这适用于需要完全重置状态的场景。

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

   • 给<router-link>添加key或force属性：在目标路由相同但希望强制刷新的情况下，可以使用:key="$route.fullPath"或:force="true"来确保组件被重新创建。例如：

     <router-link :to="{ path: '/user', query: { id: newId } }" :key="$route.fullPath">查看用户详情</router-link>
     <!-- 或者 -->
     <router-link :to="{ path: '/settings' }" :force="true">强制刷新设置页</router-link>
     

2. 传统锚点跳转 vs SP模式对比

   • 如果改用普通的HTML <a href="/path">标签而非<router-link>，则会导致整个页面重新加载（即全页刷新）。这是因为浏览器原生行为不受Vue Router控制。因此，在SPA中应始终使用<router-link>以保持局部刷新的特性。

示例区别对比

综上所述，<router-view>和<router-link>在Vue Router中协同工作，共同实现了SPA的无刷新跳转体验。开发者可根据业务需求灵活运用默认行为或强制刷新技巧来优化应用性能与交互效果。