VUE路由——子路由的创建与使用

前言

之前咱们说了一下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>

---

总结

以上就是今天要讲的内容，如有错误欢迎指正