vue实战开发011:使用router-view嵌套路由详解

前面已经把首页的顶部header和底部的footer页面写完，现在开始写内容区域了，在写内容之前我们先要将路由配置好，不然无法在页面上查看效果，所以这里我在components目录下先建了一个home.vue文件，里面简单的写了一句“我是主页中的内容，通过路由router-view嵌套进来的”，然后加了个样式方便查看。

 这里简单的说下，我们在main.js中引入vue-router组件把 Vue Router 添加进来，然后创建router 实例并传 `routes` 配置（routes不能写错哦），最后再把router挂在到vue项目中去，以上操作都可以在main.js中完成。

不过这里我为了更好的管理项目我把 router分离开来了，放在一个单独的router文件夹进行管理了，前面我已经对vue如何配置路由已经做了详解，大家可以参考：vue实战开发007:vue引入Element-UI并配置路由 ，这里是按照我项目来配置的路由，仅供参考。

 我在写index.vue页面的时候，因为在我们通常浏览的把页面分网页中底部和底部基本是不会变化的，所以这里我把页面成了3个部分，顶部、内容和底部，顶部和底部直接通过组件的形式引入了进来，而内容区域则是用router-view定义的，后续所有的子页内容我都把它指向这里，实现局部刷新。

 既然要把子页都匹配到这里，我们就要在路由中进行绑定，实现的方法很简单，只要在你需要拓展子路由的那个路由中添加子路由即可与当前路由进行绑定了，这里需要注意的是以“/”开头的嵌套路径会被当作根路径，所以子路由上可以不用加“/”（当然加也能被识别），children 配置跟 routes 配置方法一样，都是以数组形式来配置来配置路由信息的。

访问的时候我们只要在主页后面加上对应的子页路径就可以实现访问了，因为在生成路由时，主路由上的path会被自动添加到子路由之前，这里因为我是index主页，所以我们把路径直接设置为空，这样我们直接访问http://localhost:8080/index 就可以访问到router-view中的内容了。

 随着我们内容的增加，我们可以不断的扩充children中的路由，你也页可以在子页中再次嵌套router-view，并在路由中实现多重路由嵌套。