<template> <div> <ul> <router-link tag="li" to='/index'></router-link> <router-link tag="li" to='/search'></router-link> <router-link tag="li" to='/car'></router-link> <router-link tag="li" to='/vip'></router-link> </ul> </div> </template>
点击底部每个导航，导航上面的组件都会相应的替换。不过要注意点击购物车时，购物车页面底部需要有去结算按钮，所以购物车页面是没有导航的，也就是说购物车的路由配置时不会放在mian路由的children下面。
编写路由：
{ path:'https://www.jb51.net/', redirect:"/home" }, { path:'/home', component:Main, children:[ { path:'https://www.jb51.net/', redirect:"/index" }, { path:'/index', component:Index }, { path:'/search', component:Search }, { path:'/vip', component:Vip } ] }, { path:'/car', component:Car }
我们把home路由设置为默认路由，当路由为空时，就会重定向到home路由，home路由下又把index路由设置为默认路由。我们把car设为单独的路由而不是home下，因此点击导航的购物车时就会从home路由切换到car路由，而由于底部的路由是放置在home路由下，所以到了购物车页面导航也就不存在了，这样基本的配置就差不多完成了。
本节先把基本的结构搭建起来，后续才开始进入每个页面内容的编写。
目前已经写好几个页面，项目已上传到github，地址https://github.com/linrunzheng/vueApp