vue在某一个页面内部怎么进行页面的加载

 

 

 在首页里面写下面图片的列表，新建NavList一个vue文件里面保存列表，再创建一个NavListItem.vue文件写里面的样式。

首页需要书写的代码，

<nav-list  :navList="item.data"/>

 NavList.vue中书写代码

需要加上一个props，props中的navList是首页里面自定义的字符，首页里面写什么在引用的时候写成一样的便好。

props: ["navList"],

如果不加可能会报错，template中写入

<div v-for="(item, index) in navList" :key="index">
        <nav-list-item :itemContent="item"></nav-list-item>
</div>

同理在NavListitem中也需要写props，在父级页面定义的什么在子页面便引入什么

  props:["itemContent"],

html中书写的就是样式了，但是如果编写的这个列表需要路由跳转在setup中还要写

import {useRouter} from 'vue-router'  //需要引入这个用法
const router = useRouter();
        const toStore = ()=>{
            router.push("./store");  
        }
        return {
            toStore
        }