文件创建
· 打开终端执行 npx nuxi init + 文件名 即可创建文件
· 安装依赖 npm install 或 npm i (yarn install 或 yarn i)
· 运行 npm run dev
· 使用指定版本的node可以执行命令 nvm use v14.18.1(需要安装nvm)
红框内为运行后的页面内容。
静态路由
新建pages文件,在pages目录下新建index.vue文件。
NuxtPage是路由出口,写在app.vue里面
红框内为运行后的页面内容。
在pages目录下新建detail.vue文件。
同目录下的index.vue文件内添加<NuxtLink to="/detail">Detail Page</NuxtLink> ,可以跳转。
点击跳转后的页面内容就是detail.vue文件里面的内容
动态路由
文件名或者文件夹里包含了方括号,它们将被转换为动态路由参数。
在pages目录下新建user-[group]文件夹,在user-[group]目录下新建[id].vue文件。
在pages目录下的index.vue文件内添加 <NuxtLink to="/user-admin/1">/user-admin/1</NuxtLink> ,点击可以跳转
点击跳转后的页面内容就是[id].vue文件里面的内容。
嵌套路由
目录和文件同名可以制造嵌套路由
在pages目录下新建parent文件夹和parent.vue文件。在parent目录下新建child.vue文件和index.vue文件。