1.路由规则
Nuxt.js 官方文档上有句话:根据 pages
目录结构自动生成 vue-router 模块的路由配置。意思就是 Nuxt.js 是自动根据 pages 的目录结构和文件名来自动地生成 vue-route 的路由配置描述文件。使得我们不需要去自己写配置,而是按照一定的规则来创建目录和文件名即可,在 Nuxt.js 上开发项目我们是无需关心路由配置文件的,因此,这篇文章我也只说明 Nuxt.js 的规则和使用方法,具体生成的配置文件是怎样的可以参考官方文档
1.1 基础路由
Nuxt.js 按照 pages 的目录结构生成路由,文件名是 index.vue 的 url 对应其上层目录名,文件名不是 index.vue 的则根据文件名生成对应路由,假设 pages 目录下有如下目录和文件:
/test.vue => localhost:3000/test
/index.vue => localhost:3000/ (错误访问地址:localhost:3000/index)
/hello/index.vue => localhost:3000/hello (错误访问地址:localhost:3000/hello/index)
打开我们搭建的新的项目的 pages 目录里面只有有一个 index.vue 文件,运行起来,然后访问 localhost:3000 显示了 index.vue 内容
而我们把 url 改成 localhost:3000/index 去访问时却出现404提示,根据规则我们可推测 localhost:3000/index 应该是去查找 pages 目录下的 index/index.vue 发现找不到,所以404了。
接下来,我们创建一个测试的页面与 index.vue 同级就叫 about.vue 代码如下:
<template>
<div>
<h1>/about</h1>
</div>
</template>
<script>
export default {
name: "about"
}
</script>
此时,再来访问浏览器 localhost:3000/about 发现是可以正确访问的。
那我们再创建一个 about 目录然后目录下面再创建一个 index.vue 看看效果会如何。当前目录结构如下:
pages
|- about
|- index.vue
|- about.vue
|- index.vue
about/index.vue 代码如下:
<template>
<div>
<h1>/about/index</h1>
</div>
</template>
<script>
export default {
name: "about"
}
</script>
继续访问 localhost:3000/about 发现结果和上面的一样,也就是说加载文件定位的还是 about.vue 而不是 about/index.vue 。而删掉 about.vue 后再再次刷新页面,文件就加载到 about/index.vue 了。
也就是说,除了 index 外,生成路由的规则优先按 xx.vue ,没有此文件再使用 xx/index.vue 。
1.2 嵌套路由
但是要注意,在此规则下 Nuxt.js 还提供了一种路由嵌套的机制,如果同时存在 xx.vue 和 xx/index.vue 情况下,在 xx.vue 里面添加 <nuxt-child/> 标签可以显 xx/index.vue 的内容。
在刚才的测试文件中,我们找到 about.vue 修改代码如下:
<template>
<div>
<h1>/about</h1>
<nuxt-child/> <!--增加nuxt-child标签-->
</div>
</template>
<script>
export default {
name: "about-index"
}
</script>
再次访问 localhost:3000/about ,这时两个文件的内容都显示在了浏览器上
1.3 动态路由
有时候我们的路由是需要根据参数去变化的,像一些 restful 风格的接口,比如获取新闻的 url 可能是这样的:http://xx.xx.xx/news/1 后面的数字是新闻的 ID。
这种情况下我们只需要创建以【 “_” + “名称” 】创建 vue 文件即可,例如上面这个例子创建的目录和文件如下:
pages
|- news
|- _id.vue
当浏览器访问 localhost:3000/news/xx 时则加载 /news/_id.vue 文件。如果想要在 _id.vue 中获取 xx 这个参数,则用 $route.params.id 即可,_id.vue 示例代码如下:
<template>
<div>
<h1>{{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {}
</script>
当然,$route.params.id 中的 id 不是固定的,如果你的文件名不是 _id.vue 而是 _nid.vue ,那么获取参数的值的写法则为 $route.params.nid
这种方式实现的动态路由其参数不是必填的,也就是当访问 localhost:3000/news/ 时最好的参数没有添加,同样会加载到 _id.vue ,如果需要变成必填,需要将目录和文件名调整一下,变成下面这个样子
pages
|- news
|- _id
|- index.vue
区别就是新增了一个 _id 目录,然后把之前的 _id.vue 文件重名名为 index.vue 并放到了 _id 目录下面
此时再访问 localhost:3000/news/ 则跳转到404页面了
2.页面跳转
在页面之间使用路由,官方建议使用 <nuxt-link> 标签,例如:
<template>
<nuxt-link to="/news/1">查看详情</nuxt-link>
</template>
运行后我们查看渲染的代码其实就是生成一个 <a> 标签,如下:
<a href="/news/1">查看详情</a>
我们写个 for 循环测试一下
<template>
<div>
<div v-for="news in newsList">
<nuxt-link :to="'/news/'+news.id">{{news.title}}</nuxt-link>
</div>
</div>
</template>
<script>
export default {
name: 'index',
data: () => {
return {
title: 'Hello Nuxt',
newsList: [
{id: 1, title: '新闻标题一'},
{id: 2, title: '新闻标题二'},
{id: 3, title: '新闻标题三'},
]
}
}
}
</script>
最终生成的html代码如下:
<div data-server-rendered="true" id="__nuxt">
<div id="__layout">
<div>
<div>
<div><a href="/news/1">新闻标题一</a></div>
<div><a href="/news/2">新闻标题二</a></div>
<div><a href="/news/3">新闻标题三</a></div>
</div>
</div>
</div>
</div>