【Vue3】学习命名路由和嵌套路由
【摘要】 文章目录🍀命名路由🍀嵌套路由🍀总结🍀命名路由上一节我们介绍了to的两种写法,分别是字符串写法和对象写法,这里我们使用对象写法来实现命名路由我们先简单修改一下{ path:'/home', component:Home }, { name:"wan", path:'/plays', component:Play }, ...
🍀命名路由
上一节我们介绍了to的两种写法,分别是字符串写法和对象写法,这里我们使用对象写法来实现命名路由
我们先简单修改一下
{
path:'/home',
component:Home
},
{
name:"wan",
path:'/plays',
component:Play
},
{
path:'/about',
component:About
},
]
之后我们在模版那里改成对象形式,与之前不一样的是,这回使用的是name而不是pathl
<RouterLink :to="{name:'wan'}" active-class="MT">娱乐</RouterLink>
🍀嵌套路由
在Vue Router中,嵌套路由是一种将多个组件嵌套在一个父路由下的技术。这种方式使得我们可以更好地组织和管理页面结构,使得应用程序更具层次性和可维护性。下面详细介绍一下嵌套路由的用法和特点
嵌套路由顾名思义就是在一个路由里面又加了一个路由
我们首先在plays.vue中添加我们的数据代码
<template>
<div class="plays">
<ul>
<li><a href="#">王者荣耀</a></li>
<li><a href="#">原神</a></li>
<li><a href="#">和平精英</a></li>
<li><a href="#">LOL</a></li>
</ul>
</div>
</template>
<script setup lang="ts" name="plays">
import {reactive} from 'vue'
const newList = reactive([
{id:'001',title:'英雄',content:'李白'},
{id:'002',title:'英雄',content:'胡桃'},
{id:'003',title:'英雄',content:'***'},
{id:'004',title:'英雄',content:'亚索'}
])
</script>
之后我们改一下模版的内容
<template>
<div class="plays">
<ul>
<li v-for="play in newList" :key="play.id">
<a href="#">{{ play.content }}</a></li>
</ul>
</div>
</template>
最终页面的呈现如下
上面显示的是content,如果我们现在将其改为title,那么出现了列表就是四个英雄了,我们现在想点击一个英雄,出现对应的角色
接下来我们创建一个detail.vue为了显示详细的角色内容
注意:别忘了在index.ts引入,写法如下,子级不用在path写/
routes:[ //一个一个的路由规则
{
path:'/home',
component:Home
},
{
name:"wan",
path:'/plays',
component:Play,
children:[
{
path:'detail',
component:Detail
}
]
},
{
path:'/about',
component:About
},
]
接下来就按照之前的操作,导入RouterView和RouterLink,并且to一下
<template>
<div class="plays">
<!--导航区-->
<ul>
<li v-for="play in newList" :key="play.id">
<RouterLink to="/plays/detail">{{play.title}}</RouterLink>
</li>
</ul>
<!--展示区-->
<div class="news-content">
<RouterView></RouterView>
</div>
</div>
</template>
这样我们点击后就可以出现了
🍀总结
下一节我们接着本节的内容,介绍有关传参的内容
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)