# 前言
本篇文章主要介绍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文件与之类似，只是名字略有不同。而模板文件中的<nuxt />就相当于Vue中的<router-view>即路由容器。
# 一级路由
在pages文件夹下创建的一级文件都是一级路由，因nuxt是约定式路由，文件按规则创建后，直接访问文件名即可跳转至目标路由。
举个栗子
在pages下创建index.vue和about.vue俩页面
pages/
--| about.vue
--| index.vue
模板文件default.vue文件中写入以下代码
<template>
<div>
<nuxt-link to="/home"> 首页 </nuxt-link>
<nuxt-link to="/about"> 关于我们 </nuxt-link>
<Nuxt />
</div>
</template>
如上：与Vue类似，也有声明式导航<nuxt-link>，其用法与<router-link>一样。而访问一级路由的路径名称就是一级文件的文件名即路径为/文件名，以此类推可创建其他的一级文件。
# 二级路由/嵌套路由
因为nuxt是约定式路由，所以二级路由就是在pages文件夹下创建一个与一级文件同名的文件夹，在这个文件夹下创建的二级文件就会默认配置为二级路由。其访问路径同一级路由类似即/一级文件名/二级文件名。
举个栗子，如下图
1644914954(1).png
如上，goods.vue为一级路由文件，访问地址为<nuxt-link to="/goods">。创建与一级路由文件同名的文件夹goods，在goods文件下又创建了list.vue文件。这个list.vue就是一级路由/goods的二级路由文件，访问地址为<nuxt-link to="/goods/list">
这时访问
/goods/list报了404错误，为什么会找不到页面呢？其实这种创建二级路由文件有一个不好的地方：在访问/goods/list时会首先访问goods文件下的index.vue文件，此时没有这文件所以就会报错。解决办法就是在goods文件夹下创建一个空的index.vue文件即可。
1644916079(1).png
创建完之后再次访问/goods/list，哇哦，这次没有报错但页面没有出来，这又是什么鬼？？？
原因也很简单：就是在一级路由文件
goods.vue文件中没有没有放置二级路由（ 或是子路由 ）的路由容器，所有nuxt不知道将二级路由放置在哪如何显示。
<template>
<div>
我是商品类别列表
<nuxt-link to="/goods/list">某类别商品列表 </nuxt-link>
<!-- 子路由的路由容器 -->
<nuxt-child />
</div>
</template>
加上子路由的路由容器<nuxt-child />之后就可以正常展示了。
在一般情况下，我们需要创建二级路由时，都会把一级路由也放在文件夹里，这样比较好管理。但需要注意的是：一级路由与二级路由在同一个文件夹时，一级路由的文件名不再是和文件夹的同名而是index.vue。这与nuxt的约定式路由有关系：在pages文件夹下创建的一级文件夹下的index.vue默认为一级路由，访问路径为/一级文件夹名称。
还是以goods为例：
复制一级路由文件goods.vue的内容到goods文件夹下index.vue中，之后删除一级路由文件goods.vue，如下图：
image.png
可以看到已经没有了一级路由文件goods.vue，代替它的是goods文件下的index.vue文件，此时想要访问一级路由goods，路径仍为<nuxt-link to="/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中：
<template>
<div>
我是某类别商品列表
<nuxt-link to="/goods/1">详情 </nuxt-link>
</div>
</template>
怎么拿到参数值呢？其实也和Vue类似也是在params中，不同的是nuxt是在validate函数里，如下：
<script>
export default {
validate({params}){
console.log("参数为：" + params.id)
return
}
}
</script>
# 扩展路由/路由重定向
现在项目的端口是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也可以实现，咱们敬请期待~~~
网友评论