vue之嵌套路由的使用

一、我们先来看下使用嵌套路由在router----->index.js里的配置,如图所示:


vue之嵌套路由的使用_第1张图片
图一

二、这是我以前比较迷茫的地方,就是router-view的位置,到底在哪里加,什么时候加,这里我做一个详细的介绍

以vue-cli脚手架为例,我们都知道,在main.js中默认生成的是以App.vue为最底层页面

vue之嵌套路由的使用_第2张图片
图二

但同时我们在router--->index.js中也可以看出来默认的首页其实是HelloWorld.vue,这是我们如何去控制HelloWorld.vue显示的位置呢,答案就是用router-view,于是我们会看到在App.vue中router-view的位置


vue之嵌套路由的使用_第3张图片
图三

其实我们都小看了App.vue的作用了,假如每个页面的header和footer部分一样,我们完全可以在App.vue编写好header和footer部分,这样以后的每个页面都会有头部和底部

那么在嵌套路由中我们就很好理解router-view应该放在什么位置了吧,我们直接上图


vue之嵌套路由的使用_第4张图片
图四


图五

你可能感兴趣的:(vue之嵌套路由的使用)