2.Nuxt学习 组件使用和路由跳转相关

组件定义和使用

普通组件的使用

在Nuxt的项目中，可以直接在components文件夹下建立组件

在页面中直接使用 无需引入

 多层级组件的使用

我们有时候会需要多层级组件来简化代码结构 比如我们需要给Banner组件添加一个子组件

我们直接建立其名称的文件夹 写入子组件文件

在index文件中可以直接使用

 

 

路由

路由有两种形式 一种是声明式跳转 一种是导航式跳转

声明式跳转

<nuxt-link to=""></nuxt-link>

<nuxt-link to="/?detail=''参数"></nuxt-link>

我们使用声明式跳转 从index路由跳转到detail路由 并且可以携带参数

<template><div>hello world<!-- <Banner /> --><!-- <BannerChild /> --><nuxt-link to="/detail">跳转去detial</nuxt-link></div>
</template><script setup lang="ts"></script><style scoped></style>

导航式跳转

<div @click="navigateTo()"></div>

navigateTo("/?data='参数")

navigateTo({ path:'/",query:{data:参数’}})

<template><div>详情页面<div @click="navigateTo('/?data=我是detial的数据')">跳转回hello world页面</div> </div>
</template><script setup lang="ts"></script><style scoped></style>

 

接受参数

我们在使用路由参数的传递的时候，可以使用useRoute().query.data来获取页面路径的参数

<template><div>详情页面<div @click="navigateTo('/?data=我是detial的数据')">跳转回hello world页面</div></div>
</template><script setup lang="ts">
const data = useRoute().query.data;
console.log("data", data);
</script><style scoped></style>

 

 

 

嵌套路由

我们如果需要在pages文件夹下的某个路由文件 需要嵌套一个深层的嵌套路由，可以直接类似组件的写法创建文件夹和对应的文件 我们使用一个颜色进行区分

编写了子路由的文件夹以后 需要在父路由里添加子路由的"入口文件"

我们可以在首页文件中 尝试跳转进入detail的嵌套路由

 

<template><div>hello world<!-- <Banner /> --><!-- <BannerChild /> --><nuxt-link to="/detail/detailOne?data='我是首页的参数'">跳转去detial</nuxt-link></div>
</template><script setup lang="ts">
// 接受参数 useRoute().query.data
const data = useRoute().query.data;
console.log("data", data);
</script><style scoped></style>

 

 

 点击后成功的跳转了