在需求中有一个这样的情况：一个组件在主组件和另外的组件中引用，且点击主组件和这个组件分别有相应得切换事件。

一开始的时候我是没有划分组件，把它们放到主组件内，这样便于切换，但是主主件内有独立的部分需要被其他页面引用；

然后我把组件拆分，但还是在反复切换中，并没有实现需求的效果，然后我就把这个公共的部分分别作为两个组件的子路由，在切换的时候让它相同的页面进行处理不同的事件；

实现子路由的配置：

当然还有重要的一点就是你要把·<router-view></router-view> 放到相应的父组件内；

vue-router 使用二级路由去实现子组件的显示和隐藏的更多相关文章

  1. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  2. vue中.sync修饰符，实现子组件实时更新父组件的值

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定. 不过它有一个前身,先来看看.sync出现之前是如何实现的 父组件中(传递给子组件一个值:p ...

  3. vue父组件引用子组件方法显示undefined问题原因及解决方法

    关于vue父组件引用子组件问题 1.首先导入子组件并且在components中定义子组件 2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称 3.调用子组件的方法 ( ...

  4. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  5. vue中把一个事件绑定到子组件上

    官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...

  6. vue全局引入公共scss样式，子组件调用

    前提 已引用并使用scss npm install sass-loader --save-dev npm install node-sass --sava-dev 配置 在vue.config.js中 ...

  7. vue项目|在弹窗中引入uchart图表子组件不显示

    为了解决uchart作为子组件在主组件里引用但不显示的情况,(同样适用于弹窗之中)目前有三种方法. 1-解决方式 1>如果你使用的uchart子组件是从官方拿的例子:进入到uchart子组件将o ...

  8. vue <compent> 结合is实现动态切换子组件

    这里就很自然的产生一个新问题:如何给相应的子组件传props?

  9. Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听

    一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

随机推荐

  1. Vue手把手教你撸一个 beforeEnter 钩子函数

    地址 :https://www.jb51.net/article/138821.htm 地址 :https://www.jb51.net/article/108964.htm

  2. springboot整合jsp 遇到的问题

    1,在idea中新建jsp文件 首先需要在springboot项目 在src 中webapp /WEB-INF/JSP 当我右键想新建一个jsp文件时默认没有 File->Project Str ...

  3. MySQL - Lock wait timeout exceeded

    今天突然出了个奇怪的问题,原本正常启动的项目,在什么都没有修改的情况下,启动到一半的时候会卡住几分钟,几分钟后又成功启动了,刚好是卡在Quartz那里,还以为出什么奇奇怪怪的幺蛾子了,一看日志,数据库 ...

  4. 学习笔记-es5新增的一些数组的API(不全)-字符串-字符串API(不全)

    ### es5新增的数组的api + indexOf() 搜索数组中的元素,并返回它所在的位置. arr.indexOf(str,index) 参数: str为要查找的字符串 index为开始查找的下 ...

  5. Redis Desktop Manager连接Redis 遇到的一系列问题

    最近在做一个土地项目的后台,主要是一个信息采集调查系统,使用的框架是: * 核心框架:Spring Framework 4.2 * 日志管理:SLF4J 1.7.Log4j 1.2 * 视图框架:Sp ...

  6. 【记录】centOS 搭建logstash +docker搭建elasticsearch伪集群+kibana链接集群elasticsearch节点

    [注意]本文主要用于自我记录,注释较少. 安装logstash 1.上传logstash-6.4.3.tar.gz到服务中 2.tar –zxvf logstash-6.4.3.tar.gz 3.cd ...

  7. nexus私服仓库搭建以及项目引用

    第一步:使用ubunto下载安装nexus  并打开登录进入到nexus管理页面,默认账号为 admin  密码在 admin.password 中,首次登录会让你重新修改密码 第二步  配置自己本地 ...

  8. 【CSS】div的背景图完整图片覆盖

    最初的代码: .container_first { width: 100%; height: 100%; background: url(10176581.jpg); background-size: ...

  9. windows10自带的画图软件打出来的字是斜的，怎么解决?

    因为字体中带@的字体,方向就是斜的,所以打字时不要用前面带@符号的字体. 用其他字体方向为正常的

  10. centos 单用户登陆模式操作

    在centos中因为安装java而配置 jdk环境变量的原因,对/etc/profile文件进行了编辑 错误的环境变量配置导致在第一次修改profile文件并保存后,执行source /etc/pro ...