v-if和router的区别

最新推荐文章于 2022-07-25 20:27:21 发布
最新推荐文章于 2022-07-25 20:27:21 发布
阅读量358 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengfang0911/article/details/119860066
版权

感谢Electron高级技术群SngBlog(1622583480)  的回答，将总结做下记录：

  1. v-if是控制dom的增加和删除来做操作的，  v-show利用的是display none来控制的，前者代替不实际 如果项目越来越大，v-if管理会非常复杂，后者由于没销毁dom各个组件之间的实例是不会销毁的，会导致更多问题
  2. 而路由通过一个数组就可以完成各个组件之间的配置，找出debug能力和可读性大大增加，还可以带来各种钩子函数可以使用
  3. router可以更好的是组件模块化
chengfang0911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue-router与v-if实现tab切换遇到的问题及解决方法
12-09
vue-router 该如何使用 忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ 先上代码，用两种方式实现的效果 使用vue-router router import Tab1 from './components/tab/TabOne' import Tab2 from './components/tab/TabTwo' import Tab3 from './components/tab/Tab
vue面试题（v-if和v-for）（key的作用）（vue-router）（Vue性能优化）（nextTick）（Vue2）
11-15
1. [v-if和v-for哪个优先级更高？] 2. [你知道key的作用吗？] 3. [能说说双向绑定以及它的实现原理吗？] 4. [你了解diff算法吗？] 5. [vue中组件之间的通信方式？] 6. [简单说一说你对vuex理解？] 7. [vue-router中...
vuex+v-if 与vue-router
weixin_43316867的博客
11-09 447
二者都能实现相对应的效果，但是vue-router的组件生命周期是完整的，v-if不完整
v-if组件和router-view区别
MISS_zhang_0110的博客
06-02 524
v-if组件和router-view区别一、前端页面执行两次生命周期的原因APP.jsindex.js二、组件v-if生命周期 一、前端页面执行两次生命周期的原因 APP.js <template> <div id="App"> <keep-alive :include="keepAlive"> <router-view v-if="isRouterAlive" /> </keep-alive> </div
vue项目中 v-if和v-show的区别最全解析
happy81997的博客
05-15 1万+
vue项目中 v-if和v-show的区别最全解析 vue项目中有时候需要控制“条件渲染”，很多时候都是通过v-if或者v-show来控制的，有关二者的区别我想很多人都知道，但是最近做项目发现项目组中不少同志都搞不清，几乎都是乱用，出了问题，还判断不出来问题出在哪里。现在就简单讲讲这两个东西的区别。 一、功能区别 两个都能实现控制显示和隐藏，但是本质上有巨大的区别： 1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合...
$router和$route的区别，v-if和 v-for，v-show
weixin_58034343的博客
07-25 448
$router和$route的区别，v-if和 v-for为什么要避免结合使用，v-show和v-if的异同
vue-router与v-if实现tab切换的思考
weixin_30402343的博客
09-06 559
vue-router 该如何使用 忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ 先上代码，用两种方式实现的效果 使用vue-router router import Tab1 from '....
vue实现页面切换的两种方法
热门推荐
曾小超的博客
11-15 2万+
一种是通过vue-router切换页面，一种是通过v-if来切换页面。 1.vue-router的方法： (1).安装Vue-Cli npm install -g @vue/cli (2).创建一个项目 vue create hello-world (3).通过空格勾选上router、store、scss 系统会自动生成router.js文件，store.js文件 (4).新建...
搭建Vue从Vue-cli到router路由护卫的实现
10-15
搭建Vue项目通常从安装Vue CLI开始，Vue CLI是官方提供的脚手架工具，可以快速创建和配置Vue项目。首先，确保全局安装Vue CLI，对于Mac用户，可以通过以下命令执行： ```bash sudo npm install -g @vue/cli ``` ...
Vue中的条件渲染对决：v-if vs v-show深度解析
06-29
同时，Vue也完全能够支持库生态的扩展，例如通过官方维护的路由器（Vue Router）和状态管理库（Vuex）来构建大型应用。 ### Vue的主要特点： 1. **响应式数据绑定**：Vue通过数据绑定的特性，使得数据和DOM是同步...
VUE动态路由页面挂载
喜欢做一些demo，和分享遇到的 BUG
04-27 2105
先定义好路由，包括常页面路由和需要权限的路由数组 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Layout from '@/layout' export const StaticRouterMap = [ { path: '/login', name: 'Login',...
【Vue项目笔记心得】组件的隐藏与显示------v-if，v-show，路由元信息
qiaoyangla的博客
04-13 2571
显示或隐藏组件v-if、v-show Footer组件：在Home，Search时显示，在登录注册界面时隐藏 1、我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer组件的显示与隐藏 <!-- 在Home、Search显示，在登录注册隐藏 --> <Footer v-show="$route.path=='/home'||$route.path=='/search'"/> 2、配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对
vue项目 - 根据路由去做v-if v-else 的判断，设置显示隐藏
weixin_55042716的博客
06-16 2436
实现功能 : 封装的组件中，功能比较多，有些功能某些页面不需要， 解决：可以通过路由去设置特定的页面功能不需要。 代码实现： <div v-if='xians'> 这里是要显示的内容 </div> <div v-else> 这里是不需要显示的内容 </div> //判断路由 data(){ return { xians:this.$route.path.includes('/print') } } ...
vue vue-router传参，v-for与v-if结合遍历显示该参数对应的内容
ColourfulTiger的博客
06-09 6989
问题描述：接着上一篇的router-view来讲，本次主要解决的是获取地址栏的http://localhost:8081/#/HelloWorld/engine/2中的参数id的值：2，怎样通过2来使用v-for遍历数组中对应的id为2的那一栏数据，注：仅显示id为2的这一项内容。即通过参数传递过来的值决定最终要显示的数组中的那一项内容。环境：webpack v-cli1、基本配置操作（1）rou...
vue 根据路由元信息控制页面内容的展示
qq_40278189的博客
08-17 1274
在路由元中定义不同的路由需要加载不同的模块 生成计算属性 在页面中用v-if或者v-show（看情况）来控制组件的展示情况 把所有的主页面放在一级的router-view中，而不是把页面整体放在一级router-view，菜单栏显示的内容放在二级router-view。 这样的好处是：如果整体页面在一级router-view菜单栏里的详情内容在二级router-view，而二级router-view中的页面部分也需要全屏显示，这时候就只能吧二级页面中的内容放在一级的router-view
vue 获取路由的参数，并判断是否为某一特定值
ColourfulTiger的博客
06-09 7745
前提环境：webpack （1）路由的配置在router下的index.js文件中配置路由及参数      本例以子路由为主：path:'/HelloWorld/engine/:id',name: 'engine',component:engine      此处的id为路由参数，前面的内容为路径。export default new Router({  routes: [    {      p...
j3环视q111111
最新发布
07-05
j3环视q111111
router-view 可以用v-if
07-23
可以使用 `v-if` 来控制 `router-view` 的显示和隐藏。`v-if` 是 Vue.js 的条件渲染指令，它可以根据指定的条件来决定元素是否渲染到 DOM 中。 下面是一个示例代码，演示了如何使用 `v-if` 控制 `router-view` 的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值