当前位置：首页 > article >正文

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

article 2025/1/23 0:01:59

组件定义和使用

普通组件的使用

在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>