Nuxt.js 依据 pages 目录结构自动 encodeURIComponent 生成 vue-router 模块的路由配置

基础路由

  1. 假设 pages 的目录结构如下

  2. Nuxt.js 自动生成的路由配置如下

    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'
    }
  ]
}

路由导航

  1. a 标签（会刷新整个页面，不要使用）；

  2. nuxt-link 组件；

  3. 编程式导航；

动态路由

  1. 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

  2. 以下目录结构：

  3. Nuxt.js 生成对应的路由配置表为：

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

  4. 名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的；如果想将它设置为必选的路由，需要在 users/ 目录内创建一个 index.vue 文件；

嵌套路由

  1. 可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由；

  2. 创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件；

  3. Warning: 别忘了在父组件( .vue 文件) 内增加 <nuxt-child/> 用于显示子视图内容；

  4. 假设文件结构如：

  5. Nuxt.js 自动生成的路由配置如下：

    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'
        }
      ]
    }
  ]
}

路由配置

路由中间件

  1. middleware 属性：String 或 Array<string> 类型

  2. 在应用中的特定页面设置中间件（前后端都会拦截）

  1. pages/secret.vue

    <template>
  <h1>Secret page</h1>
</template>
<script>
  export default {
    // authenticated 就是 middleware 下中间件 js 文件的名字
    // 跳转这个界面前会先执行 authenticated 这个中间件
    middleware: 'authenticated'
  }
</script>

  2. middleware/authenticated.js

    // 中间件必须要放到 middleware 这个文件夹下
export default function ({ store, redirect }) {
  // 没有权限，直接重定向到登陆界面
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. 基础路由
  2. 2. 路由导航
  3. 3. 动态路由
  4. 4. 嵌套路由
  5. 5. 路由配置
  6. 6. 路由中间件