nuxt简介

Nuxt 是一个免费的开源框架，具有直观且可扩展的方式来使用 Vue.js 创建类型安全、高性能和生产级的全栈 Web 应用程序和网站。

nuxt的 目录结构是约定好的，所有文件夹都是固定的，创建项目时可能没有： 比如pages文件夹，初始化的时候可能没有，但是如果你要添加页面到nuxt，那你就需要创建一个pages文件夹，文件的命名是固定的。

pages 文件

pages文件就是我们的 vue页面。nuxt 中约定好的，pages里面的所有文件，都会自动按照文件的名字，进行添加路由。index.vue 会作为默认的访问路径。

例如：我在pages文件夹下，创建了index.vue和meta.vue 两个页面，

http://localhoust:3000 会访问index.vue

http://localhost:3000/meta 会访问meta.vue

路动态路由传参

单参数的传递只要在页面的文件名中用[ ]扩起来就可以了。比如新建一个页面，叫做 demo-[id].vue。

<template> <div class="">获取的id:{{ id }}</div> </template> 

<script setup> 
import { ref } from "vue"; 
const route = useRoute(); 
const id = ref(route.params.id);
</script> 

<style scoped></style>

多个参数就需要在新建一个目录，以多级路由来进行匹配

也即新建一个文件夹goods-[name] ,name是要转递的参数。在文件夹下创建一个demo3-[id].vue 文件.

可以以如下链接进行访问。