vue三级路由

昨天写了一个vue三级路由，才开始以为和两级写法一样，但是却报错了，经过查询。。。找到正确的写法，今天就分享一下给大家。。
vue中的router的index.js文件中：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/login/Login.vue'
Vue.use(VueRouter)

const routes = [

  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    name: 'Home',
    component: Home,

    // meta路由自身自带的属性
    meta: {
      auth: true,
    },
    children: [{
        path: '/',
        name: 'User',
        component: () => import('../views/home/user/User.vue')
      },
      // 商品列表
      {
        path: '/goods',
        name: 'Goods',
        component: () => import('../views/home/card/Goods.vue'),
        children: [{
            path: '/',
            name: 'GoodDetail',
            component: () => import('../views/home/card/GoodDetail.vue'),
          },
          {
            path: '/goods/add',
            name: 'Addlist',
            component: () => import('../views/home/card/Addlist'),
          }
        ]
      },

    ]
  },

]

const router = new VueRouter({
  routes
})

export default router  

然后点击事件执行：

 <el-button type="primary" @click="addGoodlist">添加商品</el-button>

export default {
  methods: {
    //  添加商品
    addGoodlist() {
      this.$router.push("/goods/add");
    }
  }
 }

实现就是这样，容易错的点就是路径容易写错。
注：是/goods/add不是/add

2023年2.28
经过评论区小伙伴提出的看法，我去实践了一下，发现下面这种写法也可以实现：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    // meta路由自身自带的属性
    meta: {
      auth: true,
    },
    children: [{
        path: '/',
        name: 'User',
        component: () => import('../views/home/user/User.vue')
      },
      // 商品列表
      {
        path: '/goods',
        name: 'Goods',
        component: () => import('../views/home/card/Goods.vue'),
        children: [{
            path: '/',
            name: 'GoodDetail',
            component: () => import('../views/home/card/GoodDetail.vue'),
          },
          {
            path: 'add',
            name: 'Addlist',
            component: () => import('../views/home/card/Addlist'),
          }
        ]
      },

    ]
  }
  ]

事件执行为：

   addGoodlist() {
      this.$router.push("/add");
   }