vue 根据路由元信息控制页面内容的展示

最新推荐文章于 2023-03-30 00:08:29 发布
最新推荐文章于 2023-03-30 00:08:29 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40278189/article/details/108052626
版权

在路由元中定义不同的路由需要加载不同的模块

生成计算属性

在页面中用v-if或者v-show（看情况）来控制组件的展示情况

把所有的主页面放在一级的router-view中，而不是把页面整体放在一级router-view，菜单栏显示的内容放在二级router-view。

这样的好处是：如果整体页面在一级router-view菜单栏里的详情内容在二级router-view，而二级router-view中的页面部分也需要全屏显示，这时候就只能吧二级页面中的内容放在一级的router-view中，两个路由距离太远，就很难看到内在联系。

一口咬掉牛尾巴
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue多个路由共用一个页面，路由传参不同，页面显示数据不同，并重新加载数据
smilling sky的博客
07-30 6727
1.首先在设置路由的文件设置路由信息。 （我的是在index.js中设置路由） routes: [ { path: '/home/exchange/detail', name: 'detail', component: () => import ('@/pages/exchange/Exchange'),
vue中使用路由router在本页某区域显示要的内容
qq_45684708的博客
08-21 1552
案例 Html <!--左侧列表--> //on-select 事件会在文本框中的文本被选中时发生。 //active-name 默认选择的是 /user 即用户管理 <div active-name="/user" @on-select="selectMenu"> <div name="/user">用户管理</div> <div name="/qx">权限管理</div> </div> <!--主体区域conte
vue如何通过控制路由改变相邻页面的数据？
大豆博文
09-03 815
首先，刚开始肯定大家都会想到，我们可以通过拼接地址，利用URL的属性，动态获取路由的query值或者parmas值，通过获取页面跳转路由ID参数实时更新数据，但是这只是适合于小型项目；其实我们可以完整的利用vue的生命周期，created,用watch侦听获取实时数据的参数ID，之后通过created同步获取更新上个页面的数据变化； 点击用户头像 =&gt; 进入用户个人中心，在用户个人中心里点...
Vue-05-router之嵌套路由以及其参数传递
[爪洼ing]的博客
06-08 198
关于路由router我们在04当中已经将其简单的使用讲解了，这里就再走深一步，嵌套路由以及其参数的传递！ 1.嵌套路由： 关于嵌套路由很简单，例如： 只需要再原路由的配置下，配置一个children！ 为什么不再定义一个路由而是非得在原路由下嵌套路由：在父组件下定义的路由配置，只有在父组件下，去访问才可以拿到 2.参数传递: 如下就是参数传递的方式 请求方式：1.path 2.name 携带参数方式：param：{key：value} 接收方式：1.开始props，直接从props获取 2.去配置r.
vue中根据路由from不同展示同一个页面搜索条件不同
weixin_44986077的博客
02-03 715
项目要求：从一个页面的按钮跳转页面，该页面搜索条件变化，不从按钮进入搜索条件变成另一种 同一个页面同一个路由不同的展示条件 思路：假入从a页面的按钮调到b页面那么展示第二张图，如果不通过a页面按钮进入b页面展示第一张图，搜索条件写了两个用v-show显示第一张图，a页面点击按钮的时候this.router.push(′/b′)并在按钮注册的事件中用sessionStorage.setItem(′forma′,′a′)做个标记，现在跳入b页面，对b页面搜索条件进行控制，首先在created中获得sessi
解决vue多个路由共用一个页面的问题
08-27
在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 Vue 多个路由共用一个页面的问题，具有很...
vue自定义指令和动态路由实现权限控制
11-19
2. **动态路由**：在Vue中，动态路由是指能够根据不同的参数生成不同的页面。在`src/router/index.js`中，我们会看到两个部分，`constantRoutes`是静态路由，这些路由是应用中固定不变的部分，而`asyncRoutes`则是...
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
一种方法是创建一个名为`redirect.vue`的空白页面，然后在`beforeCreate`钩子中根据查询参数重定向回目标页面： ```javascript export default { beforeCreate() { const nextPath = this.$route.query.nextPath...
vue实现权限控制路由(vue-router 动态添加路由)
10-16
在Vue.js应用程序中，权限控制路由是一种常见的需求，它允许我们根据用户的权限来决定他们可以访问哪些页面。Vue Router是Vue.js官方的路由管理器，它提供了强大的功能，包括动态添加路由。下面我们将深入探讨如何...
vue 动态路由
01-20
Vue.js 是一款流行的前端框架，其强大的路由管理功能是它的一大亮点。动态路由是 Vue Router 提供的...同时，Vue Router 还提供了多种高级特性，如导航守卫、元信息、重定向和别名等，帮助开发者更精细地控制路由行为。
Vue路由（vue-router）详细讲解指南
细雨纷飞~~~
03-12 4922
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由； 　　routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对..
VUE三 vue-router（路由）详解
weixin_30446613的博客
05-08 1463
前端路由 根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作 优点 用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 一、路由（以user为例） userList...
15 【Vue-Router】
DSelegent的博客
07-29 422
15 【Vue-Router】
vue中router-view实现切换组件
showkw的博客
04-29 1841
项目中，要实现一个组件内切换多个组件的显示，就会用到router-view来实现点击切换组件显示的效果。
vue3最全路由使用教程
热门推荐
begefefsef的博客
03-06 2万+
路由介绍我再此之前发布过vue2的基本使用，想要了解的可以去vue2路由教程 下面开始上手路由 认识vue-router 目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装Vue Router：npm install vue-router@4 路
Vue全家桶系列之Vue-router(四)
09-26 4484
文章目录1.前言2.路由命名视图3.路由滚动行为 1.前言 上篇文章说了vue-router的路由的重定向，路由嵌套，命名路由以及路由的别名的使用，接下来再看看其他的用法 2.路由命名视图 有时候想同时 (同级) 展示多个视图，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了，如果 router-view 没有设置名字，那么默认为 default。还是用之前的例子，在home路由上添加一个sidebar视图，先修改下路由配置！ import
vue 控制组件在不同页面的显示
XL_0502的博客
03-30 924
我们可以将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。可以使用数组的indexOf()方法，判断$route.path是否存在于数组a中，如果不存在则返回true。:在app.vue页面使用MHead组件，利用v-show或v-if来实现显示|隐藏。:将要显示的页面地址存在数组中，判断$route.path不等于数组中元素。在定义路由时配置meta，meta为组件实例身上$route的一个属性。
vue-通过路由控制来实现的权限管理
leveretz的博客
01-02 1273
vue-通过路由控制来实现的权限管理
vue左侧菜单栏控制右侧页面内容切换
最新发布
07-29
使用vue的组件和路由机制，我们可以轻松地实现左侧菜单栏控制右侧页面内容的切换。这种方式在创建大型网站或应用程序时非常方便，可以提高开发效率和用户体验。同时，vue还提供了丰富的工具和指令，帮助我们实现复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值