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

Li Derong

于 2021-10-09 20:22:18 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css vue.js javascript

本文链接：https://blog.youkuaiyun.com/model__/article/details/120671722

本文介绍了一级路由和二级路由在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">