vue中组件切换是一个比较常见的应用常见的应用场景,例如tab导航切换等,我们看看一些常见的vue组件切换方式。

v-if

这种比较简单,代码结构如下:

v-if切换,每次都去重新加载组件,我们看到组件bbb中,你增加数字,切换后数字又变成1了。

v-show

这种和上面结构差不多,就是把v-if变成了v-show:

在v-show中,所有组件都会加载,后期点击只是改变它们显示或者不显示,在组件bbb中,你增加数组,切换后再回来,数字没变。

和v-if相比,v-show初始消耗比较大,v-if则是每次点击消耗比较大。

component的:is属性

这个是利用component的:is属性,关键代码如下:

如果com_name和组件名字相同,那么component就会变成那个组件,这种和v-if类似,每次切换都会重新加载组件。

嵌套路由

vue-router中有一个children配置,是用来配置嵌套路由的,例如/index/aaa和/index/bbb这种结构,其中/index的部分是公共的,页面不会变动,大致结构如下:

这种和上面不同,这种路径会发生变化。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字