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

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

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

实现子路由的配置：

当然还有重要的一点就是你要把·<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. Java DOM解析器 - 查询XML文档

    这是需要我们查询的输入XML文件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?xml version="1.0"?> ...

  2. @RequestParam 引发的编译问题

    在使用SpringMVC绑定基本类型(如String,Integer等)参数时,应通过@RequestParam注解指定具体的参数名称,否则,当源代码在非debug模式下编译后,运行时会引发Handl ...

  3. 使用yarn搭建vue项目

    今天尝试了一下用yarn的方式搭建vue项目,方法其实是和npm的用法一样.但是在创建过程中报错了.现在整理一下,便于后期查错时使用. 以windows系统为例 1.全局安装yarn,三种方式 官网上 ...

  4. 使用IntelliJ IDEA配置Maven（详细操作）

    一,下载Maven 进入官网http://maven.apache.org/  点击Download 找到如下图所示的区域,注意你的操作系统. 点击安装你所需要的安装包,下载,解压. 二,Maven环 ...

  5. python基础【第九篇】

    补充知识 1.字符串方法的补充 s = str() s.format() # 格式化输出 "连接符".join("连接的对象") # 拼接 s.find() # ...

  6. sort的排序及使用

    sort() 方法在适当的位置对数组的元素进行排序,并返回数组.数组会按照字符的Unicode进行排序(把数组里面当成字符串处理) 1. 按升序排列: var arr=[1,11,2,22,5,4,0 ...

  7. Mint安装配置Sublime Text3

    1.注册码: Sublime Text 3 3126 注册码 2.安装Package Control组件: 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置 ...

  8. 【目录】ASP.NET Core 2.1 入门教程

    ASP.NET Core 2.1 快速学习.入门系列教程,这个入门系列教程为了帮助大家快速上手ASP.NET Core. 本教程包含且不限于: 使用VS Code开发ASP.NET Core应用 AS ...

  9. SpringCloud：基础

    SpringCloud:基础 SpringCloud 是微服务架构的一个实现框架,说他是一个框架更不如说他是一个生态,他包含了很多个技术,将这些技术组合起来形成我们的微服务架构应用. 1.Spring ...

  10. Light项目---vue搭建前端时遇见的一些问题

    css样式中设置的: opacity 表示透明度 将js对象存储到localStorge中 的时候,直接存储是不行的,会变成[object Object],都是这样的数据, 需要将其进行JSON化处理 ...