上篇文章我们简单学习了SSR和基础的Nuxt.js语法,以及一些关于Nuxt.js的路由知识,东西不多,确实让我们感受到了Nuxt.js的方便配置。也不知道为什么,虽然我个人很喜欢一些小而美的框架,比如Flask, Koa, Gin之类的,但是对于Vue和Koa基础上得以封装的Nuxt.js也感觉到不错的样子。
路由和切换效果
Nuxt.js的路由封装的办法挺有意思的,上文我们讲过一些简单的路由,那么如果类似于下面的封装结构:
我们的配置应该是这样的:
//about.vue
<h1>this is the about page</h1>
<nuxt-link :to="{name:'index'}">Back</nuxt-link>
//index.vue
<div class="links">
<nuxt-link :to="{name:'about'}">about</nuxt-link>
<nuxt-link :to="{name:'about-error'}">error</nuxt-link>
</div>
这就类似于vue-router中的:
router: {
routes: [
{
name: 'index