vue.js - 请问使用vue-router与v-show分别实现选项卡有什么区别？

Question

我们开发项目，无论是后台管理系统，还是移动应用，经常会使用到各式各样类似选项卡的切换组件，如下：

1、管理后台：

2、选项卡：

3、移动端底部tabber:

问题如下：
1、实现这种类选项卡组件有2中方法：分别是 vue-router的嵌套路由 和 v-show, 请问2种实现有什么区别（个人看不出区别），来回切换时，能否缓存原本查看的内容呢？什么时候使用vue-router的嵌套路由，什么时候使用v-show

2、vue-router 嵌套路由，在不断切换子路由时，父路由的组件是从新加载？还是缓存了无需再次加载呢？

请问大神们，能否详细解答？谢谢！

Answer 1

1. v-show 顾名思义，切换靠的是隐藏与显示，所以所有组件都会创建出来，不会销毁
2. vue-router 则会创建和销毁组件
3. 如何抉择？我觉得两者不存在竞争关系。很明显，vue-router 需要跟 URL 关联起来；而 v-show 则仅限于同一个页面里不同内容的呈现。

Answer 2

这个问题涉及到了 Vue.js 框架下的两种重要技术：vue-router 和 v-show。vue-router 是 Vue.js 的官方路由管理器，它允许你为应用定义路由，以便用户能够在不同的页面之间进行导航。v-show 是一个 Vue.js 的指令，用于根据表达式的值来动态地显示或隐藏元素。

首先，我们来回答你的第一个问题。vue-router 和 v-show 都可以用来实现选项卡组件，但是它们的工作方式和使用场景有很大的区别。

1. vue-router 的嵌套路由：

当你使用 vue-router 的嵌套路由来实现选项卡组件时，你需要在路由配置中为每个选项卡定义一个子路由。然后，你可以使用 <router-view> 组件来动态地渲染当前激活的子路由对应的组件。当用户切换选项卡时，子路由会发生变化，相应的组件也会被重新加载和渲染。这种方式适合用于那些需要加载大量数据或资源的选项卡，因为在每个选项卡之间切换时，子路由对应的组件会被重新加载，从而确保数据的最新和资源的有效利用。

2. v-show：

当你使用 v-show 来实现选项卡组件时，你可以为每个选项卡定义一个 Vue 组件，并使用 v-show 指令来动态地显示或隐藏它们。v-show 指令会根据表达式的值来决定是否显示或隐藏元素。当用户切换选项卡时，v-show 指令会控制对应组件的显示和隐藏，而不会重新加载组件。这种方式适合用于那些数据量不大且不需要频繁加载的选项卡，因为它可以避免不必要的组件重新加载和渲染。

关于你的第二个问题，当使用 vue-router 的嵌套路由时，父路由的组件是否会重新加载取决于路由配置和 Vue.js 的懒加载机制。默认情况下，当父路由的 URL 发生变化时，父路由的组件会被重新加载。但是，如果你使用了 Vue.js 的懒加载机制来加载父路由的组件，那么父路由的组件只会在第一次访问时被加载，而在后续的导航中会保持缓存状态，不会再次被加载。