Nuxt 路由

一.路由概述

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

标签名	描述
<nuxt-link>	nuxt.js中切换路由
<Nuxt />	nuxt.js的路由视图
<router-link>	vue默认切换路由
<router-view/>	vue默认路由视图

 二.基础路由

 2.1路由匹配规则

路径	组件位置及其名称	规则
/	pages/index.vue	默认文件 index.vue
/user	pages/user/index.vue	默认文件 index.vue
/user/one	pages/user/one.vue	指定文件

 2.2 路由初始入口

 

 2.3实例

情况1：访问路径，由pages目录资源的名称组成（目录名称、文件的名称）
  - 资源位置： ~/pages/user/one.vue
  - 访问路径：http://localhost:3000/user/one

情况2：每一个目录下，都有一个默认文件 index.vue
  - 资源位置： ~/pages/user/index.vue
  - 访问路径：http://localhost:3000/user

注意！！

• pages/user.vue 文件 【优先级高】

• pages/user/index.vue 文件

三:动态路由

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

路由中路径匹配	组件位置及其名称
/	pages/index.vue
/user/:id	pages/user/_id.vue
/:slug	pages/_slug/index.vue
/:slug/comments	pages/_slug/comments.vue

实例:

项目目录：

pages

          _id.vue

访问地址:

http://localhost:3000/17 (注意17是传入的值)      

<template>
  <div>
    {{ $route.params.id }}
  </div>
</template>

四.设置不匹配的路径

路径	组件位置及其名称
不匹配的路径	pages/_.vue

• 404页面，可以采用 _.vue进行处理