【Vue3】学习命名路由和嵌套路由

举报
小馒头学Python 发表于 2024/03/19 13:10:58 2024/03/19
【摘要】 文章目录🍀命名路由🍀嵌套路由🍀总结🍀命名路由上一节我们介绍了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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。