vue @路径_Vue路由多路径配置同一个组件

是不是经常会有这样的情况，两个组件的内容基本一致，比如下面这样：

最简单的方式可以直接用两个组件，逻辑完全分开，好配置好操作，就是代码重复的多。

这样的情况，建议用一个组件，通过路由的配置，最大程度实现代码的重用，操作过程如下：

children: [      {        path: 'checked',        name: 'checked',        component: () => import('../views/user/index.vue'),        meta: {          title: '正式用户',          icon: ''        }      },      {        path: 'unchecked',        name: 'unchecked',        component: () => import('../views/user/index.vue'),        meta: {          title: '未审核用户',          icon: ''        }      }    ]

经过上面的配置，我们的两个路径 checked 和 unchecked 都会访问同一个 vue 组件。

后面要解决的就是如何在组件内对这两个路径进行区分(此时组件的 mounted() 钩子只能执行一次)，以便从后台得到正确的数据和组件内显示正确的内容，可以这样搞：

// 方法1，用 watchwatch: { $route: {   immediate: true,    handler(to, form) {      // TODO     }  }}// 方法2，给  加 key，此方式可以让组件的 mounted() 钩子正常触发

还可以在路由中配置参数的方式，形如 /user/:type，这样的情况和上面的类似，组件也会被重用进而导致生命周期钩子不被触发的情况，因为类似，放一起说说：

// /user/:type 方式配置的路由，可以用上面的方法，也可以如下，在组件内写一个导航守卫beforeRouteUpdate(to, from, next) {    next();}

总结：工作中遇到问题的一个小结，只解决了组件公用后生命周期钩子不能触发带来的问题，业务逻辑自行安排，仅供参考！

vue @路径_Vue路由多路径配置同一个组件相关推荐

关于Vue实现动态路由component找不到组件的问题(Error: Cannot find module ‘@/views/User‘)
项目场景: 在项目开发中会有这么一个需求:不同的角色对应的权限不一样也就意味着所展现的菜单也会不一致,因此我们需要实现一个动态路由,在这过程中遇到了一个棘手的问题,也就是标题所说的,特写本文作为记录 ...
配置ALB基于路径的路由功能
关注公众号:AWS爱好者(iloveaws) 文 | 沉默恶魔(禁止转载,转载请先经过作者同意) 网站:www.iloveaws.cn Hello大家好,欢迎来到<AWS解决方案架构师认证 Pr ...
router vue 多个路径_vue-router 路由总结
vue.js 路由基础安装vue - router 直接下载 / CDN Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指向在 NPM 发布的最新版本.你也可以像 htt ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...
vue中的路由2-----嵌套路由跳转，传参和路径记录问题
vue路由如何传参的问题这篇文章分为两个部分, 第一个是怎么传过去第二个是怎么接收信息在学习之前我们要了解一下路由跳转的规则 (1)路由跳转相当于一个栈,你每跳一次就往栈添加一条数据,所以你可以 ...
踩坑Gateway服务搭建、配置网关路由、路径重写和解决跨域问题（java类实现跨域）
由于项目需要,需要使用Gateway,话不多说直接干引入依赖 <dependency><groupId>org.springframework.cloud</group ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
vue路由文件相关配置
vue路由文件相关配置 vue路由文件相关配置一.vue嵌套路由路径斜杠'/'的使用 1.根组件上的path 2.根组件上的redirect 3.子组件里面的path 总结二.路由守卫 1.作用 ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...

vue @路径_Vue路由多路径配置同一个组件

vue @路径_Vue路由多路径配置同一个组件相关推荐

最新文章

热门文章