配置父子路由关系,A.vue和B.vue是Main.vue的子组件:

{

path: '/main/',

name: 'main',

component: () => import('components/Main.vue'),

children: [

{

path: 'a',

name: 'a',

component: () => import('components/A.vue')

},

{

path: 'b',

name: 'b',

component: () => import('components/B.vue')

}

]

}

编写两个简单的子组件:

一个是A.vue

This is A

export default {

name: "A"

}

一个是B.vue

This is B

export default {

name: "B"

}

然后编写父组件Main.vue

A

B

路由导航和导向到子路由。

用来显示子路由对应的内容,即子路由对应页面的显示区域。

修改路由配置,添加redirect: {name: "a"},使输入/main/时自动重定向到/main/a

{

path: '/main/',

name: 'main',

component: () => import('components/Main.vue'),

redirect: {name: "a"},

children: [

{

path: 'a',

name: 'a',

component: () => import('components/A.vue')

},

{

path: 'b',

name: 'b',

component: () => import('components/B.vue')

}

]

}

vue 子路由如何激活父路由_vue嵌套路由(父子路由)相关推荐

  1. vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...

    vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...

  2. vue 获取当前元素的父元素_vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  3. vue watch 监听不到变化_vue watch 监听路由变化

    首页 列表页 购物车 会员中心 import store from "../../store" import { mapState, mapActions } from " ...

  4. vue.js根据数据循环生成表格_vue嵌套列循环生成考勤表数据

    如图 接口返回数据格式: { "total": 1, "rows": [ { "name": "钟伟清", " ...

  5. VUE—跳转到该父路由下的指定子路由(图文详情)

    VUE-跳转到该父路由下的指定子路由 第一步:在index.js里配置路由,父路由不写name,指定子路由写父路由的name,其余子路由路由前不加'/' {path: '/Layout',compon ...

  6. vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...

  7. vue 传递 对象 路由_vue 04 -vue路由对象($route)参数简介以及和router的区别

    vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...

  8. Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫

    1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...

  9. vue知识(四)生命周期、钩子函数、路由

    文章目录 一.生命周期 (一)vue生命周期 二.钩子函数 (一)钩子函数 (二)4大阶段8个方法 (1)如何知道vue生命周期到达了什么阶段? (2)钩子函数有哪些 (三)初始化 (1)new Vu ...

最新文章

  1. 面霸篇:高频 Java 基础问题(核心卷一)
  2. 用Php设置Iptables,如何使用CSF添加自定义iptables规则
  3. python with open as yaml_python怎么解析yaml文件?
  4. Web安全实践(14)嗅探,arp欺骗,会话劫持与重放攻击(下)
  5. [].slice.call(arguments)模拟实现 Array.of
  6. 局部内部类 java 1614958356
  7. 一个基于verilog的FPGA 的LCD 1602 显示程序
  8. Mimics17.0安装教程
  9. 8153网卡linux驱动,绿联Type-c千兆网卡RTL8153驱动
  10. 金融反欺诈(项目练习)
  11. 汤普森算法_什么是汤普森采样(Thompson sampling)?
  12. linux常用命令100
  13. 推荐系统——Neural Collaborative Filtering(NMF)
  14. vscode背景图片设置分享
  15. Scratch(三):跳一跳
  16. AI聚变:寻找 2018 优秀人工智能应用案例
  17. 微信小程序加密 MD5
  18. linux 判断u盘 硬盘坏道,u盘怎么检测硬盘坏道
  19. 网络安全乱流,超级保护才是根本
  20. Trash Problem

热门文章

  1. 角蜂鸟AI视觉套件1:开箱和开发环境搭建
  2. android 屏幕录制方案,Android录屏的三种方案
  3. 推荐一个免费的论文查重网站
  4. Github私有仓库改为公开仓库
  5. 胸部肌肉训练(附图)
  6. python keyboard 键盘自动控制库
  7. BUUCTF bbys_tu_2016xm_2019_awd_pwn2
  8. mac 项目的配置与使用
  9. SSH连接服务器软件
  10. 办理3A等级信用证书有什么好处