Vue SSR 项目 Nuxt.js 框架之《路由》

# 前言

本篇文章主要介绍nuxt的路由，包括一级路由二级路由三级路由...等，以及对应等级路由的创建方式和文件及文件夹创建的规则，因为nuxt是约定式路由，当然也支持路由配置，接下来就让我们逐步探讨一下 ( 官网文档 )。

# 约定式路由

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

例如pages目录结构如下：

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

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

Vue中有模板文件app.vue，在nuxt中layouts文件夹中的default.vue文件与之类似，只是名字略有不同。而模板文件中的就相当于Vue中的即路由容器。

# 一级路由

在pages文件夹下创建的一级文件都是一级路由，因nuxt是约定式路由，文件按规则创建后，直接访问文件名即可跳转至目标路由。

举个栗子

在pages下创建index.vue和about.vue俩页面

pages/
 --| about.vue
 --| index.vue

模板文件default.vue文件中写入以下代码

如上：与Vue类似，也有声明式导航，其用法与一样。而访问一级路由的路径名称就是一级文件的文件名即路径为/文件名，以此类推可创建其他的一级文件。

# 二级路由/嵌套路由

因为nuxt是约定式路由，所以二级路由就是在pages文件夹下创建一个与一级文件同名的文件夹，在这个文件夹下创建的二级文件就会默认配置为二级路由。其访问路径同一级路由类似即/一级文件名/二级文件名。

举个栗子，如下图

1644914954(1).png

如上，goods.vue为一级路由文件，访问地址为。创建与一级路由文件同名的文件夹goods，在goods文件下又创建了list.vue文件。这个list.vue就是一级路由/goods的二级路由文件，访问地址为

这时访问/goods/list报了404错误，为什么会找不到页面呢？其实这种创建二级路由文件有一个不好的地方：在访问/goods/list时会首先访问goods文件下的index.vue文件，此时没有这文件所以就会报错。解决办法就是在goods文件夹下创建一个空的index.vue文件即可。

1644916079(1).png

创建完之后再次访问/goods/list，哇哦，这次没有报错但页面没有出来，这又是什么鬼？？？

原因也很简单：就是在一级路由文件goods.vue文件中没有没有放置二级路由（或是子路由）的路由容器，所有nuxt不知道将二级路由放置在哪如何显示。

加上子路由的路由容器之后就可以正常展示了。

在一般情况下，我们需要创建二级路由时，都会把一级路由也放在文件夹里，这样比较好管理。但需要注意的是：一级路由与二级路由在同一个文件夹时，一级路由的文件名不再是和文件夹的同名而是index.vue。这与nuxt的约定式路由有关系：在pages文件夹下创建的一级文件夹下的index.vue默认为一级路由，访问路径为/一级文件夹名称。

还是以goods为例：

复制一级路由文件goods.vue的内容到goods文件夹下index.vue中，之后删除一级路由文件goods.vue，如下图：

image.png

可以看到已经没有了一级路由文件goods.vue，代替它的是goods文件下的index.vue文件，此时想要访问一级路由goods，路径仍为。

值得注意的是：路径/goods访问的是goods文件夹的index.vue文件，切记，切记，切记

友情提示：平时在创建二级路由的时候，推荐第二种方法（可根据项目和具体需要而定）。

# 动态路由

在Vue中声明动态路由一般为path: /detail/:id，即可以向动态路由/detail/传不同的id值以便查询不同的id值下的详情信息，如：/detail/1，/detail/2，/detail/3等等。

在nuxt中声明动态路由与Vue略有不同，Vue是以/:id为标识为此路由为动态路由，传参的key为id。而在nuxt中需要创建一个文件即_id.vue，以_表示此路由为动态路由，传参的key为**_**后边的值即id。

还是以goods为例

在goods文件夹下创建_id.vue文件，标识为goods的动态路由，用于查询goods的详情，结构如下图：

1644919298(1).png

在list.vue中写如下代码即可跳转至动态路由文件_id.vue中：

怎么拿到参数值呢？其实也和Vue类似也是在params中，不同的是nuxt是在validate函数里，如下：

# 扩展路由/路由重定向

现在项目的端口是8000，但访问localhost:8000是报404错误找不到页面，必须访问localhost:8000/home才能看到首页。想要类似Vue那样，把路径/ 和 /home都定向到页面home.vue改如何做呢？？

这时就用到了nuxt的扩展路由的配置，在nuxt.config.js配置文件

export default {
    router: {
        middleware: 'auth.js',
        // 扩展路由
        extendRoutes(routes, resolve) {
            // 路由重定向
           // routes.push({
            //     path: '/', // 法一
            //     redirect: '/home'
            // });
            routes.push({
                name: 'home', // 法二
                path: '/',
                component: resolve(__dirname, 'pages/home.vue')
            })
        }
    }
}

此时再访问localhost:8000地址就可跳转至home.vue页面了
如果想访问localhost:8000/index时也跳转至home.vue，同样在nuxt.config.js配置文件配置即可

export default {
    router: {
        middleware: 'auth.js',
        // 扩展路由
        extendRoutes(routes, resolve) {
            // 路由重定向
            // routes.push({
            //     path: '/', // 法一
            //     redirect: '/home'
            // });
            routes.push({
                name: 'home', // 法二
                path: '/',
                component: resolve(__dirname, 'pages/home.vue')
            });
            // 路由重命名
            routes.push({
                name: 'index',
                path: '/index',
                component: resolve(__dirname, 'pages/home.vue')
            })
        }
    }
}

友情提示：利用中间件middleware也可以实现，咱们敬请期待~~~