21、嵌套路由实战操作

bus_lupe

已于 2023-12-16 22:00:56 修改

阅读量325

点赞数

分类专栏： nuxt 文章标签： javascript vue.js 前端

于 2023-11-19 22:24:24 首次发布

本文链接：https://blog.csdn.net/bus_lupe/article/details/134496106

版权

nuxt 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1、创建内嵌子路由，你需要添加一个vue文件，同时添加一个与该文件同名的目录用来存放子视图组件。
2、在父组件（.vue）内增加用于显示子视图内容

新建文件

pages\index\_id.vue

生成的对应路由

 {
    path: "/",
    component: _56a4a1e7,
    name: "index",
    children: [{
      path: ":id?",
      component: _0e5705e3,
      name: "index-id"
    }]
  },

id?说明id参数是非必传，如果想要id必传，在对应目录下新建index.vue
对应的新生成的路由：

{
    path: "/",
    component: _56a4a1e7,
    children: [{
      path: "",
      component: _049610bb,
      name: "index"
    }, {
      path: ":id",
      component: _0e5705e3,
      name: "index-id"
    }]
  },