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

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

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

实现子路由的配置:

当然还有重要的一点就是你要把·<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. Javascript优点和缺点

    优点: 函数是顶级对象 基于原型继承的动态对象 对象字面量和数组字面量 缺点: 全局变量 作用域 自动插入分号 保留字 Unicode typeof parseInt + 浮点数 NaN

  2. 查看hive版本号

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sheismylife/article/details/33378243 hive没有提供hive - ...

  3. LeetCode Array Easy 118. Pascal's Triangle

    Description Given a non-negative integer numRows, generate the first numRows of Pascal's triangle. I ...

  4. Android中XML的命名空间、自定义属性

    命名空间(namespace) XML 命名空间提供避免元素命名冲突的方法. 举个例子,A学校有名学生叫做林小明,B学校也有名学生叫林小明,那我们如何识别这两名拥有相同名字的同学呢?这时候命名空间就派 ...

  5. Stm32CubeMX5 配置 外部中断

    实验使用连接PA8引脚的按键触发中断,外部中断使用双边沿触发,这样就可以检测按键按下与松开,当按键按下时点亮LED, 当按键松开是关闭LED,在中断服务函数中只置位相应的标志,在main函数中具体处理 ...

  6. Git分布式版本控制系统(下)

    Git分布式版本控制系统(下) 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方便 ...

  7. 死磕Spring源码系列

    一.Spring总体架构 1.架构图 2.SpringIOC:核心容器提供 Spring 框架的基本功能.核心容器的主要组件是 BeanFactory,它是工厂模式的实现.BeanFactory 使用 ...

  8. Redis ASP.NET 配置链接

    对于安装Redis后 很是不明白如何建立Redis 和 .net 的链接配置 于是查找了很多的资料 首先第一步:安装ASP.NET  NuGet 包 (ServiceStack.Redis) 安装好后 ...

  9. TreeSet集合在哪种情况下会报错

    1.自然排序中的元素对象,都必须实现了Comparable接口,否则会抛出异常,案例如下: public class MySetTree { public static void main(Strin ...

  10. jmeter测试之-脚本制作

    一.脚本录制  1.遇见的问题,回放的时候总是登录失败 解决方式:设置HTTP请求为—跟随重定向 2.新增一个用户的时候,脚本参数里面输入汉字,在浏览器查看的时候显示问号 解决方式:脚本编码方式增加u ...