一级路由和二级路由的实现过程!!

本文介绍了一级路由和二级路由在Vue.js中的实现方法。首先通过设置布局,然后使用js进行路由配置,实现页面间的跳转。接着,通过数据绑定和循环,从后台获取数据并填充到预先定义的数组中,动态渲染视图。在mounted阶段,通过监听路由变化来更新数据和高亮当前选中项。通过这种方式,可以创建出层级结构的路由视图,并实现导航菜单的交互效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大致思路:写好布局之后,就开始我们的js渲染和vuex操作,先写路由跳转,让页面能够简单的跳转,主要就是路由嵌套路由的写法。然后就是数据的绑定和循环,先设置一个空的数组,给他起一个名字,把后台数据赋值到这个空数组内,在页面中进行循环渲染。基本就是拿数据渲染视图,只是一层又一层的渲染,父级路由嵌套子级路由。

效果图如下:

先写好咱们的简单的布局:

<template>
    <div class="recipe">
        <!-- v-model="activeName" -->
        <!-- 菜谱分类 start -->
        <el-tabs type="border-card>
            <el-tab-pane>
                <div class="recipe-link">
                    <router-link >
                        菜单一
                    </router-link>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <div class="recipe-link">
                    <router-link >
                        菜单二
                    </router-link>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <div class="recipe-link">
                    <router-link >
                        菜单三
                    </router-link>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 菜谱分类 end -->
        <h2>家常好味道,给你家一般的温暖</h2>
        <!-- 容器 -->
            <!-- 左侧列表 -->
            <!-- 右侧显示 -->
        <!-- 容器 -->
        <el-container>
            <el-aside width="220px" class="recipe-aside">
  
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值