【求助！】使用router-view出现页中页怎么解决

yaling_309

已于 2024-03-23 13:03:26 修改

阅读量233

点赞数 7

文章标签： javascript 前端 html vue vue.js elementui

于 2024-03-23 13:01:28 首次发布

本文链接：https://blog.csdn.net/yaling_309/article/details/136965045

版权

文章描述了一个女大学生在使用VueRouter进行项目开发时遇到的问题，涉及一级路由和二级菜单的配置，求助如何正确导入和连接到相应的组件。

摘要由CSDN通过智能技术生成

求求大佬帮忙看看是什么问题咱也不会呀/(ㄒoㄒ)/~~

救救孩子吧一个女大学生即将破碎

这是router.js 的代码

import {createRouter,createMemoryHistory} from "vue-router"
import index from "./components/UserIndex.vue"

const routes = [

    //一级路由
    {
        path: '/',
        name:'index',
        component:index,
        children:[


            {
                path: '/main1',
                component: () => import('./components/Main1.vue'),
            },
            {
                path: '/main2',
                component: () => import('./components/Main2.vue'),
            },
            {
                path: '/main3',
                component: () => import('./components/Main3.vue'),
            },
            {
                path: '/main4',
                component: () => import('./components/Main4.vue'),
            },
            {
                path: '/main5',
                component: () => import('./components/Main5.vue'),
            },

        ]

    },

]

const router = createRouter({
    history: createMemoryHistory(),
    routes,
})

export  default router;

然后这是边栏的

<!--页面左侧的边栏导航-->
<template>
  <div>
    <el-menu >
        <div class="tools-name">订单中心</div>
      <el-divider /> <!-- 一个分割线-->
        <el-menu-item index="1"><el-icon><document/></el-icon><router-link to="/main1" >我的订单</router-link></el-menu-item>
        <el-menu-item index="2"><el-icon><Camera /></el-icon><router-link to="/main2">评价晒单</router-link></el-menu-item>
         <div class="tools-name">账户设置</div>
      <el-divider /> <!-- 一个分割线-->
        <el-menu-item index="3"><el-icon><UserFilled /></el-icon><router-link to="/main3">个人信息</router-link></el-menu-item>
        <el-menu-item index="4"><el-icon><Tools /></el-icon><router-link to="/main4">修改密码</router-link></el-menu-item>
        <el-menu-item index="5"><el-icon><LocationInformation /></el-icon><router-link to="/main5">收货地址</router-link></el-menu-item>
      <el-divider /> <!-- 一个分割线-->

      <el-sub-menu index="7">
          <template #title><el-icon><more-filled/></el-icon>关于我们</template>
          <el-menu-item index="7-1-1">公告资讯</el-menu-item>
          <el-menu-item index="7-1-2">系统简介</el-menu-item>
          <el-menu-item index="7-1-3">轮播图</el-menu-item>

      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import {
  Document, MoreFilled, LocationInformation, UserFilled, Tools, Camera
} from '@element-plus/icons-vue';

export default {
  name: "Aside",
  components: {Camera, Tools, UserFilled, LocationInformation, Document,MoreFilled},
}
</script>


<style scoped>
/*设置点击前的样式 */
a{
  text-decoration: none;
  color: black;
}
/*设置点击后的样式 */
.router-link-active {
  text-decoration: none;
  color: #cea2e3;
}

/*设置分类栏的样式*/
.tools-name{
  display: block;
  height: 30px;
  padding-top: 20px;
  font-size: 15px;
  color: #b2b2b2;
}
</style>