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

{

path: '/main/',

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

children: [

{

path: 'a',

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

{

path: 'b',

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

}

]

}

编写两个简单的子组件:

一个是A.vue

This is A

export default {

}

一个是B.vue

This is B

export default {

}

然后编写父组件Main.vue

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

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

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

{

path: '/main/',

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

redirect: {name: "a"},

children: [

{

path: 'a',

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

{

path: 'b',

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

}

]

}

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

vue 如何处理两个组件异步问题_Vue异步组件处理路由组件加载状态的解决方案...
vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般 ...
vue 获取当前元素的父元素_vue获取dom元素内容
通过ref来获取dom元素在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
vue watch 监听不到变化_vue watch 监听路由变化
首页列表页购物车会员中心 import store from "../../store" import { mapState, mapActions } from " ...
vue.js根据数据循环生成表格_vue嵌套列循环生成考勤表数据
如图接口返回数据格式: { "total": 1, "rows": [ { "name": "钟伟清", " ...
VUE—跳转到该父路由下的指定子路由（图文详情）
VUE-跳转到该父路由下的指定子路由第一步:在index.js里配置路由,父路由不写name,指定子路由写父路由的name,其余子路由路由前不加'/' {path: '/Layout',compon ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
Vue(小码哥王洪元)笔记06路由，url的hash，history，router-linke，路由跳转，动态路由，懒加载，路由嵌套，router参数传递，导航守卫
1.什么是路由路由器提供了两种机制:路由和传送路由:数据报从来源到目的地的路径传输:将输入端的数据转移到合适的输出端路由有一个非常重要的概念教路由表路由表本质上就是一个映射表,决定了数据包的 ...
vue知识（四）生命周期、钩子函数、路由
文章目录一.生命周期 (一)vue生命周期二.钩子函数 (一)钩子函数 (二)4大阶段8个方法 (1)如何知道vue生命周期到达了什么阶段? (2)钩子函数有哪些 (三)初始化 (1)new Vu ...

vue 子路由如何激活父路由_vue嵌套路由（父子路由）

This is A

This is B

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

最新文章

热门文章