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 6670
1.首先在设置路由的文件设置路由信息。 （我的是在index.js中设置路由） routes: [ { path: '/home/exchange/detail', name: 'detail', component: () => import ('@/pages/exchange/Exchange'),
vue中使用路由router在本页某区域显示要的内容
qq_45684708的博客
08-21 1540
案例 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 805
首先，刚开始肯定大家都会想到，我们可以通过拼接地址，利用URL的属性，动态获取路由的query值或者parmas值，通过获取页面跳转路由ID参数实时更新数据，但是这只是适合于小型项目；其实我们可以完整的利用vue的生命周期，created,用watch侦听获取实时数据的参数ID，之后通过created同步获取更新上个页面的数据变化； 点击用户头像 =&gt; 进入用户个人中心，在用户个人中心里点...
Vue-05-router之嵌套路由以及其参数传递
[爪洼ing]的博客
06-08 196
关于路由router我们在04当中已经将其简单的使用讲解了，这里就再走深一步，嵌套路由以及其参数的传递！ 1.嵌套路由： 关于嵌套路由很简单，例如： 只需要再原路由的配置下，配置一个children！ 为什么不再定义一个路由而是非得在原路由下嵌套路由：在父组件下定义的路由配置，只有在父组件下，去访问才可以拿到 2.参数传递: 如下就是参数传递的方式 请求方式：1.path 2.name 携带参数方式：param：{key：value} 接收方式：1.开始props，直接从props获取 2.去配置r.
通过Vue路由实现Tab栏切换案例，要求为：创建3个子路由，分别是“待付款”、“待发货”、“待收货”，在每个子路由页面单独写出相
最新发布
04-29
Vue-router 的主要作用是构建单页应用（SPA）的路由系统，可以方便的将组件映射到路由上，使得我们可以控制组件的渲染和展示。 Vue-router 的主要组件包括： <router-link>：用于导航链接，它会被渲染为一个 <a> ...
vue实现整屏滚动切换
12-28
本文实例为大家分享了vue实现整屏滚动切换的具体代码，供大家参考，具体内容如下 1、下载vue-awesome-swiper npm i vue-awesome-swiper -S 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' ...
vue中使用router全局守卫实现页面拦截的示例
01-18
　静态路由的使用场景：在我们使用静态路由实现页面跳转时，不管我们是否登录，当我们在地址栏修改地址后，页面会发生跳转并展示页面内容（数据并不会被展示出来），这样的问题显然是不能够被接受的； 　动态路由的...
vue项目中遇到的难点面试.pdf
12-14
本资源摘要信息主要集中在Vue项目中遇到的难点面试问题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP的区别等相关知识点。 1. Vue的基本原理 Vue的基本原理是基于数据劫持结合发布者-订阅者模式，...
2021Vue面试题笔记.pdf
12-14
以下是根据提供的文件信息生成的知识点总结： 1. Vue 基础 * Vue 实例创建时，Vue 会遍历 data 中的属性，使用 Object.defineProperty（Vue 3.0 使用 proxy）将它们转换为 getter/setter，并且在内部追踪相关依赖...
vue中根据路由from不同展示同一个页面搜索条件不同
weixin_44986077的博客
02-03 709
项目要求：从一个页面的按钮跳转页面，该页面搜索条件变化，不从按钮进入搜索条件变成另一种 同一个页面同一个路由不同的展示条件 思路：假入从a页面的按钮调到b页面那么展示第二张图，如果不通过a页面按钮进入b页面展示第一张图，搜索条件写了两个用v-show显示第一张图，a页面点击按钮的时候this.router.push(′/b′)并在按钮注册的事件中用sessionStorage.setItem(′forma′,′a′)做个标记，现在跳入b页面，对b页面搜索条件进行控制，首先在created中获得sessi
Vue路由（vue-router）详细讲解指南
细雨纷飞~~~
03-12 4910
Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由； 　　routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对..
VUE三 vue-router（路由）详解
weixin_30446613的博客
05-08 1455
前端路由 根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作 优点 用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 一、路由（以user为例） userList...
15 【Vue-Router】
DSelegent的博客
07-29 416
15 【Vue-Router】
vue中router-view实现切换组件
showkw的博客
04-29 1816
项目中，要实现一个组件内切换多个组件的显示，就会用到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 4471
文章目录1.前言2.路由命名视图3.路由滚动行为 1.前言 上篇文章说了vue-router的路由的重定向，路由嵌套，命名路由以及路由的别名的使用，接下来再看看其他的用法 2.路由命名视图 有时候想同时 (同级) 展示多个视图，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了，如果 router-view 没有设置名字，那么默认为 default。还是用之前的例子，在home路由上添加一个sidebar视图，先修改下路由配置！ import
vue 控制组件在不同页面的显示
XL_0502的博客
03-30 912
我们可以将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。可以使用数组的indexOf()方法，判断$route.path是否存在于数组a中，如果不存在则返回true。:在app.vue页面使用MHead组件，利用v-show或v-if来实现显示|隐藏。:将要显示的页面地址存在数组中，判断$route.path不等于数组中元素。在定义路由时配置meta，meta为组件实例身上$route的一个属性。
vue-通过路由控制来实现的权限管理
leveretz的博客
01-02 1258
vue-通过路由控制来实现的权限管理
vue左侧菜单栏控制右侧页面内容切换
07-29
vue是一种流行的JavaScript框架，用于构建用户界面。在一个基于vue开发的网站或应用程序中，左侧菜单栏可以用来导航不同的页面或功能，而右侧页面内容则用于显示具体的页面内容。 具体来说，通过在vue中使用组件的方式，我们可以轻松地实现左侧菜单栏控制右侧页面内容的切换。首先，我们需要创建一个父组件，用于包含左侧菜单栏和右侧页面内容。接着，在父组件中定义一个data属性，用于记录当前选中的菜单项或页面。然后，我们可以在父组件的模板中使用<router-view>标记来动态展示右侧页面内容。 在左侧菜单栏中，我们可以使用vue-router来定义不同的路由。每个路由对应一个菜单项，并且指定要显示的组件。当用户点击菜单项时，vue-router会根据路由规则自动切换到对应的页面，并将选中的菜单项记录到父组件的data属性中。这样，右侧的<router-view>标记就会根据选中的菜单项显示相应的页面内容。 使用vue的组件和路由机制，我们可以轻松地实现左侧菜单栏控制右侧页面内容的切换。这种方式在创建大型网站或应用程序时非常方便，可以提高开发效率和用户体验。同时，vue还提供了丰富的工具和指令，帮助我们实现复杂的页面切换效果和动画。总之，vue是一个很好的选择，用于构建拥有左侧菜单栏控制右侧页面内容切换功能的网站或应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值