一、nuxt添加路由拦截
1. 在plugins文件夹下创建auth.js.
export default ({ app }) => { app.router.beforeEach((to, from, next) => { // process.client 是否来自客户端渲染 if (process.client) { const token = sessionStorage.getItem(‘token‘); if (!token && to.path !== ‘/login‘) { next(‘/login‘); } else if (to.path !== ‘/login‘) { next(); } else { next(); } } }); };
2.nuxt.config.js页面
plugins: [ ‘@/plugins/auth‘, ],
这种做法存在问题： next(‘/login‘);会走error页面
解决方案：
1、在middleware文件夹下边创建 redirect.js
export default function ({ route, redirect }) { if (process.client) { const token = sessionStorage.getItem(‘token‘); if (!token && route.path !== ‘/login‘) { redirect(‘/login‘); } } }
2、nuxt.config.js页面
router: { middleware: [‘redirect‘], },
Nuxt.js 为页面提供的特殊配置项。其中 head 配置当前页面的 Meta 标签, 详情参考： https://zh.nuxtjs.org/api/pages-head/
head: { title: ‘一本书 - 首页‘, meta: [ { hid: ‘description‘, name: ‘description‘, content: ‘website description‘ }, { name: ‘keywords‘, content: ‘一本书‘ } ] },
三、添加页面切换特效
全局动画默认使用 page 来进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的 assets/css 下建立一个
main.css 文件。
.page-enter-active, .page-leave-active { transition: opacity 2s; } .page-enter, .page-leave-active { opacity: 0; }
然后在 nuxt.config.js 里加入一个全局的 css 文件就可以了。
css:[‘assets/css/main.css‘],
四、制作一个详情页
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。也就是要么创建_id.vue,要么创建_id/index.vue
新建 pages/books/_id.vue
原文：https://www.cnblogs.com/haonanZhang/p/12660565.html