前言
之前咱们说了一下VUE-router
路由的模块化安装与使用,今天说一下vue-router中子路由的使用方法
[点击跳转进入VUE-router路由的模块化安装与使用](https://blog.csdn.net/BiangBaing/article/details/111594890) 提示:以下是本篇文章正文内容,下面案例可供参考
路由组件js代码
import Login from "../components/Login/Login.vue"
import HW_01 from "../components/HelloWorld_01.vue"
//以下为子路由
import Shopgoods from "../components/shop/shopGoods/shopGoods.vue"
import Shopratings from "../components/shop/shopRatings/shopRatings.vue"
import Shopinfo from "../components/shop/shopInfo/shopInfo.vue"
{path:"/Login",component:Login,meta:{showFooter:false}},
//三个子路由为HW_01页面的路由
{path:"/HW_01",component:HW_01,
children:[//关键字 children 子路由path的/可以省略
{ path : 'goods',component:Shopgoods},
{ path : 'ratings',component:Shopratings},
{ path : 'info',component:Shopinfo},
{path:"",redirect:'/HW_01/goods'},
//重定向
]
},
html中的使用
//使用方式跟路由是一样的,都使用了<router-link>,并且带上父路由的路径
<div class="fenlan-a">
<router-link to="/HW_01/goods">点餐</router-link>
</div>
<div class="fenlan-a">
<router-link to="/HW_01/ratings">评价</router-link>
</div>
<div class="fenlan-a">
<router-link to="/HW_01/info">商家</router-link>
</div>