Nuxt2——路由

Nuxt内置了路由模块,无需自行编写路由文件

Nuxt会根据pages/自行配置路由文件

基础路由

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

得到路由配置

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

嵌套路由

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

 

posted @ 2024-01-18 16:31  Karle  阅读(144)  评论(0编辑  收藏  举报