判断当前路由，指定组件显示与否

最新推荐文章于 2023-06-02 17:09:22 发布
最新推荐文章于 2023-06-02 17:09:22 发布
阅读量1k 收藏 3
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39704803/article/details/109294220
版权

查看当前路由
 

{{this.$route.path}}

判断如果不是首页，则显示面包屑
 

 <div class="breadcrumb-container" v-if="this.$route.path != '/home'">
        <el-breadcrumb class="common-container" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>


 

qq_39704803
关注
专栏目录
详解AXI4-Full接口（1）--什么是AXI4-Full接口？
孤独的单刀
11-24 1万+
通过本文您会学到：什么事AXI-Full总线？
BAT 大厂Java 面试题集锦之核心篇附参考答案
程序员光剑
11-05 1万+
核心篇数据结构与算法网路:TCP/IP,HTTP操作系统, 文件, shell, CPU, IO, epoll, 非阻塞IO,进程/线程/协程,锁HashMap, Co...
使用路由元信息判断显示或隐藏
xx820702的博客
05-12 582
App.vue <template> <div> <common-header v-show="$route.meta.show"/> <div id="app"> <router-view></router-view> </div> </div> </template> <script> import CommonHeader from "@/componen
vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由
AKindofo的博客
06-02 555
【代码】vue点击导航菜单，展示选中样式，菜单路由存在嵌套路由时也可以判断为当前路由。
vue 路由判断
qq_61869009的博客
04-02 5750
解决的一个问题分享。我的需求是从特定的页面进入当前页面会执行一个定时器来增加阅读人数，当进入该页面15秒后浏览人数会增加1。 话不多说直接上代码。先在methods里定义一个定时器方法和一个修改浏览人数方法。 ​ methods: { // 增加阅读人数 setpeople(){ console.log('定时器开启'); // overTimer 这个值可以写在data里面 //也可以直接用 const overTi
vue获取当前页面路由
热门推荐
yangwq的博客
08-10 2万+
当前页面 完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params 判断当前路由不匹配时跳转 if(this.$route.path!='/Home'){ this.$router.push({ path:'/Home', }) } ...
判断路由的路径和当前标签是否相同 的方法
weixin_30527551的博客
01-24 535
$route (to, from) {if (to.name == 'infant-birth-registration') {this.inpatNum = this.$route.params.getVal ? this.$route.params.getVal.inpatNum : ''if (this.inpatNum != '') {setTimeout(() => {this.i...
Vue路由的钩子函数
weixin_45205937的博客
10-15 709
vue路由钩子大致可以分为三类： 1、全局钩子 主要包括 beforeEach 和 afterEach， beforeEach 函数有三个参数： to：router即将进入的路由对象 from：当前导航即将离开的路由 next();进行管道中的一个钩子，如果执行完了，则导航的状态就是confirmed（确认的）；否则为false，终止导航。 afterEach 函数不用传next()函数 这类钩子...
kafka+zookeeper篇（组件、原理、使用场景、面试）
jianyong的博客
05-30 2102
kafka+zookeeper篇kafka组件、原理、使用场景、面试题、Topic & Partition、Producer消息路由产生及存储方式、离线处理和实时处理
Linux之安全最佳做法（未完成）
企业实战系列集 ●●● https://ximenjianxue.blog.csdn.net
11-12 2282
一直跟Linux打交道，但是凡事多扰，一直未专门针对系统安全做过针对性总结，基于此，本文将记录总结一些Linux 安全配置过程中的常用实践，最后梳理成为安全最佳实践。
(笔记)vue通过当前路由来判断活动的菜单，刷新不失效
zongmaomx的博客
07-07 478
效果：当前选中的菜单背景色改为深色，通过路径来判断 在data中给imgs数组的对象添加link属性和对应的值 在style中设置当前活动菜单的背景色 在绑定class时通过判断当前路径中是否含有link来添加nownav class ...
vue+element 路由跳转方式和常见问题
fywh123的博客
04-09 1005
@[TOC]记录开发中常见的问题 跳转路由的几种方式 1、声明式： 1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link> 2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查
Angular获取当前激活路由与监听路由
moqiuqin的博客
08-02 6236
Angualr获取当前激活路由可以通过PlatformLocation和Router获取，还有一说Location也可以，看名字估计是没问题的。这里就写前面两个，PlatformLocation这个包来自@angular/common，Router来自@angular/router constructor( private route:Router, private planfor...
angular6 根据路由判断是否显示头部和底部
weixin_42080477的博客
07-29 478
private router: Router, // 不显示底部的页面数组 hideFooterPage: Array<any> = [ '/spot/trade', '/contract/trade', '/bxa' ]; // 不显示头部的页面数组 hideHeaderPage: Array<any> = [ '/bxa' ]; /** * 是否隐藏 底部 o...
路由组件按需加载的几种方法
学习记录
09-12 2268
　像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。   　在Vue项目中，一般使用vue-cli构建项目后，我们会在Router文件夹下面...
vue项目 - 根据路由去做v-if v-else 的判断，设置显示隐藏
weixin_55042716的博客
06-16 2492
实现功能 : 封装的组件中，功能比较多，有些功能某些页面不需要， 解决：可以通过路由去设置特定的页面功能不需要。 代码实现： <div v-if='xians'> 这里是要显示的内容 </div> <div v-else> 这里是不需要显示的内容 </div> //判断路由 data(){ return { xians:this.$route.path.includes('/print') } } ...
vue项目分析--index.html+main.js+App.vue关系,前端路由的使用
weixin_46045444的博客
10-11 3425
main.js引入文件 https://www.cnblogs.com/chenleideblog/p/10484554.html https://blog.csdn.net/bujiongdan/article/details/81416100 app.vue是一个根组件，main.js 是一个入口文件，index.html是项目入口 index.html有的时候放在public文件夹下 app.vue里实际上就是定义了一个可以操作的vue模板区域，export default实际上就是把这个根组件暴露出
Vue之判断页面二级路由
我是我
08-05 2361
判断二级路由 当我们在项目进行时，如果项目底部有tabbar，tabbar主要是四个大模块之间的相互跳转，若我们在二级路由之后页面不想看到，我们可以有以下两种方式： 方式一： 在App.vue中定义tabbar， v-show="某个判断条件"， 我们可以在router.js中设置meta属性， 来控制该路由是否要显示 代码 App.vue <van-tabbar v-show="!$route.meta.notShowTab" route v-model="active" @change="
vue标签内判断是否是该路由，是显示，否则隐藏
xx820702的博客
06-10 582
vue标签内判断是否是该路由，是显示，否则隐藏
vue根据路由接收参数判断组件显示隐藏
最新发布
09-11
在Vue中，路由参数通常是通过Vue Router来处理的。Vue Router是Vue.js的官方路由器，允许你将组件映射到路由上，并在路径变化时动态渲染它们。要根据路由参数来判断组件的显示和隐藏，你可以使用路由守卫（route guards）和watch属性来实现。 以下是一个基本的实现方法： 1. 在Vue组件中使用`watch`监听路由对象的变化，特别是`params`的变化。 2. 根据路由参数的值来设置组件的显示状态。 ```javascript <template> <div> <SomeComponent v-if="shouldShowComponent" /> </div> </template> <script> export default { data() { return { showComponent: false }; }, watch: { '$route.params'(toParams, fromParams) { // 根据路由参数来设置组件的显示状态 this.showComponent = this.isComponentToShow(toParams); } }, methods: { isComponentToShow(params) { // 在这里判断是否需要显示组件，可以根据需要编写逻辑 // 例如，检查某个参数是否存在或是否满足特定条件 return params.hasOwnProperty('someParam'); } } }; </script> ``` 在这个例子中，当路由参数`someParam`存在时，`SomeComponent`组件会被显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值