【易购管理系统】路由界面基础搭建

最新推荐文章于 2024-04-24 20:27:21 发布
最新推荐文章于 2024-04-24 20:27:21 发布
阅读量1.9k 收藏 3
点赞数
分类专栏： 易购后台管理系统 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40992225/article/details/127153525
版权

路由基础搭建

我们分析一下这个项目
在这里插入图片描述
这个页面点到退出的页面以后，和我们上面窗口同级的有个登陆界面
在这里插入图片描述
我们在配置的过程中，一个大的主界面和我们的登录界面是同级的。所以我们的路由配置有两个一个是页面布局配置和同级登录界面配置

  • 页面布局配置
    在view中新建Layout文件夹，在其中新建index.vue文件
<template>
  <div>
    <h2>布局</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
  • 登录界面配置
    在view中新建Login文件夹，在其中新建login.vue文件
<template>
  <div>
    <h2>登录</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

然后再我们的router的index.js中进行配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from '../views/Loyout/index.vue';
import Login from '../views/Login/Login.vue'

Vue.use(VueRouter);

const routes = [{
        path: '',
        component: Layout,
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    }
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
});

export default router;

再到app.vue中写上 < router-view>

<template>
  <div id="app">
  <router-view></router-view>
  </div>
</template>

效果为
请添加图片描述
布局又分为左侧和右侧。
在这里插入图片描述

我们在Layout文件中新建Mymenu.vue文件，是我们的左侧导航区域

<template>
  <div>
    <h2>导航区域</h2>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

我们在Layout文件中新建Content.vue文件，是我们的右侧内容区域

<template>
  <div>
  <div class="header">顶部区域</div>
  <!-- 内容区域 -->
  <div class="content">内容区域</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='less' scoped>
.header {
  height: 50px;
  line-height: 50px;
  color: #fff;
  background: #1e78bf;
}
</style>

然后再到index.vue中将这两个组件作为子组件导入

<template>
  <div class="layout">
   <!-- 左侧导航区域 -->
  <Mymenu class="menu"></Mymenu>

   <!-- 右侧内容区域 -->
   <Content class=""></Content>
  </div>
</template>

<script>

import Content from './Content.vue'
import Mymenu from './Mymenu.vue'
export default {
    components: {
    Content,
    Mymenu
}
}
</script>

<style>

</style>

设置一下样式

<style lang='less' scoped>
.layout{
    .menu{
        // width: 200px;
        // min-height: 500px;
        background: #112f50;
        position: fixed;
        top:0;
        bottom:0;
    }
}

</style>

在这里插入图片描述
Layout是一级路由，它里面套着二级。
我们新建文件夹
在这里插入图片描述

然后在router文件夹中的index.js中配置路由信息

import Vue from 'vue';
import VueRouter from 'vue-router';
import Layout from '../views/Loyout/index.vue';
import Login from '../views/Login/Login.vue';
import Home from '../views/Home/index.vue';

//异步
const Goods = () =>
    import ('../views/Goods/Goods.vue')
const Params = () =>
    import ('../views/Params/Params.vue')
const Advert = () =>
    import ('../views/Advert/Advert.vue')
const Order = () =>
    import ('../views/Order/index.vue')

Vue.use(VueRouter);

const routes = [{
        path: '',
        component: Layout,
        children: [{
                path: '/',
                name: 'Home',
                component: Login
            },
            {
                path: '/goods',
                name: 'Goods',
                component: Goods
            },
            {
                path: '/advert',
                name: 'Advert',
                component: Advert
            },
            {
                path: '/params',
                name: 'Params',
                component: Params
            },
            {
                path: '/order',
                name: 'Order',
                component: Order
            }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    }
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
});

export default router;

然后在Mymenu.vue中

<template>
  <div>
  <ul>
    <li>
        <router-link to="/">首页</router-link>
    </li>
      <li>
        <router-link to="/goods">商品管理</router-link>
    </li>
      <li>
        <router-link to="/params">规格参数</router-link>
    </li>
      <li>
        <router-link to="/advert">广告分类</router-link>
    </li>
     <li>
        <router-link to="/order">订单管理</router-link>
    </li>
  </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

紧接着，在Order文件夹中新建OrderList文件夹，OrderBack文件夹
在这里插入图片描述
然后再到路由文件中进行配置

const OrderList = () =>
    import ('../views/Order/OrderList/index.vue')
const OrderBack = () =>
    import ('../views/Order/OrderBack/index.vue')

{
                path: '/order',
                name: 'Order',
                component: Order,
                children: [{
                        path: 'order-list',
                        component: OrderList,
                    },
                    {
                        path: 'order-back',
                        component: OrderBack,
                    }
                ]
            }

最后的结果是

http://localhost:8080/order/order-list

输入上面的这一行会出来
在这里插入图片描述
还需要 做一个重定向

  {
                path: '/order',
                name: 'Order',
                component: Order,
                redirect: '/order/order-list',
                children: [{
                        path: 'order-list',
                        component: OrderList,
                    },
                    {
                        path: 'order-back',
                        component: OrderBack,
                    }
                ]
            }

此时页面上的左侧还不是我们想要的样式，我们就可以在elementUI里面拿东西了在这里插入图片描述
找到库里面的导航菜单
在这里插入图片描述
的自定义一栏的代码复制下来，代替Mymenu.vue中的ul>li中的内容

<div>
      <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <!-- 带有下拉的 -->
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </div>

效果如下：
在这里插入图片描述
适当的进行修改

<div>
      <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      
      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="2" >
        <i class="el-icon-document"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">规格参数</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">广告分类</span>
      </el-menu-item>
      
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="5-1">订单列表</el-menu-item>
          <el-menu-item index="5-2">退货管理</el-menu-item>
      </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>

结果如下：
在这里插入图片描述
因为路由的配置
在这里插入图片描述
我们需要修改

<el-menu
      default-active="/"
<el-menu-item index="/">

修改整体如下

   <el-menu  router="true"
      default-active="/"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/goods" >
        <i class="el-icon-document"></i>
        <span slot="title">商品管理</span>
      </el-menu-item>
      <el-menu-item index="/params">
        <i class="el-icon-setting"></i>
        <span slot="title">规格参数</span>
      </el-menu-item>
      <el-menu-item index="/advert">
        <i class="el-icon-setting"></i>
        <span slot="title">广告分类</span>
      </el-menu-item>
      
      <el-submenu index="/order">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>订单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/order/order-list">
            <i class="el-icon-location"></i>
          <span>订单列表</span>
            </el-menu-item>
          <el-menu-item index="/order/order-back">
             <i class="el-icon-location"></i>
          <span>退货管理</span>
            </el-menu-item>
      </el-menu-item-group>
      </el-submenu>
    </el-menu>

结果为：
请添加图片描述
再看一下折叠属性
在这里插入图片描述

我们在menu中添加折叠属性
在这里插入图片描述
效果如下

在这里插入图片描述
但是我们并不是直接折叠的，我们是点击一个按钮，由这个按钮来进行控制是否折叠，从而控制collapse是true还是false

纵有千堆雪与长街
关注
专栏目录
探讨边缘计算在监控、预测和控制方面的最新进展，以及如何利用边缘计算平台及其相关技术框架开发具有良好性能的实时监控系统
AI天才研究院
08-05 886
IoT (Internet of Things) 智能终端包括传感器、智能手机、穿戴设备等，通过将物理世界的数据转换成信息并交付给云端的计算中心进行处理，可以实现远程监控、预测和控制。随着社会经济的不断发展，智能终端不断增加，应用需求也日益广泛。而边缘计算在当下正成为一种新型计算模式，它通过本地资源与数据收集方式对计算任务提速。远程环境中的传感器、视频流、音频信号、位置信息、行为数据等数据通常需要存储、分析、传输和处理。
谷粒商城基础篇
apple_52138126的博客
03-06 2772
大哥的笔记
路由组件layout
weixin_44707050的博客
10-25 2165
在父级路由中，component为layout页面 说明每个父级路由中都有layout这个组件。因为有children子路由 所以要在layout中添加router-view。在首页 '/' 重定向为第一个子路由 child页面。redirect是重定向。
若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
热门推荐
坐等夕阳落time的博客
08-13 2万+
若依vue前端能跳转到新路径的方法，我暂且知道这三种形式：1 在若依的菜单项添加2 在router里添加3 直接用标签里跳转第1和第2钟做法，都是要提前声明一个路由对象，然后使用或者$router.push跳转metaTitle: row.chargeName + '的费用配置'},})第3钟做法，不用声明就可以直接跳转，但是因为你不曾声明过，所以面包屑和标签页标题是不会发生改变的。..................
将后端传回的“component“: “Layout“, 转为“component“: Layout组件对象
u011155153的专栏
07-08 2034
需要将()=>import('@/views/dashboard/index.vue') 修改为 ()=>require('@/views/'+file+'.vue') 1、_import_development.ts文件内内容 2、showdataAPI.ts 后台返回数据格式 3、router/index.ts 重写路由 这里两种方法都可以（loadView、_import） ...
vue3+ts+vite自适应项目——路由、layout布局
DW14687的博客
05-01 3259
以上就是今天得内容，路由配置，下一章准备将请求~
vue component layout得侧边栏模板 
sunlizhen的专栏
05-20 7199
router index import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '../view/worksheet/HelloWorld' import practice from '../view/worksheet/practice' import viewpac from '../view/worksheet/viewpac' import Layout from '../view/layout/
7-苏宁易购网上商城网站模板.zip
11-13
总的来说，这个“7-苏宁易购网上商城网站模板”包含了构建一个完整电商网站所需的各种设计和技术元素，是开发人员快速搭建类似苏宁易购平台的一个起点。通过解压并研究这个模板，开发者可以学习到电商网站设计的最佳...
谷粒商城--分布式基础篇1
xu_jin_shan的博客
02-19 936
谷粒商城-分布式基础篇1 项目简介、分布式基础、环境搭建、Spring Cloud Alibaba
苏宁11.11：搜索引擎Solr在苏宁易购商品评价系统中的应用
cpongo5
11-05 454
背景说明苏宁易购商品评价系统主要提供商品维度评价数量聚合、评价列表展示功能，并为其他业务系统提供商品评价数据支撑服务。功能涉及对亿级数据的数量聚合、排序、多维度查询等复杂的业务场景，关系型数据库的索引为B-Tree结构，适合数值区分度或离散度高的数据，而评价系统中单个商品评价可以达到数十万条，相同星级的评价数则为亿级，故不适宜使用关系型数据库。解决此类海量数据准实时聚合的技术选型有以倒排表作为索引...
详解vue三级目录页面缓存
vfs494的博客
09-29 2673
最近公司需要完成三级目录缓存，记录下遇到的坑。路由由后端动态提供的，二级目录的路由配置如下 { path: '/guide', component: Layout, redirect: '/guide/index', children: [ { path: 'index', component: () => import('@/views/guide/index'), name: 'Guide',
vue-router中有layout的布局写法
guochao8的博客
02-18 1万+
路由数据demo export default [ '/', '/activity/application', '/activity/change', '/activity/applicationDetail', '/activity/promotion', '/promotion/reimburse', '/promotion/join', '/promot...
vue2.0 - layout组件（六）面包屑组件布局
sqLeiQ的博客
06-27 674
vue,面包屑组件
项目分析三
zhayuanyuan22的博客
03-25 770
一、路由页面整理 // 在src/router/index.js中删除多余的静态路由，后续再慢慢添加 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import Layout from '@/layout' export const constantRoutes = [ { path: '/login', component: () => import('@/views/logi
Vue3（2）:路由配置+登录模块+layout组件+路由鉴权
最新发布
m0_73560798的博客
04-24 1970
我们要做的，封装用户仓库数据ts类型的定义 ，因为之前在user.ts里面使用了很多未封装未声明类型的ts数据，写的也很长，所以需要封装一下。（1）定义小仓库数据state类型：src\store\modules\types\type.ts// 定义小仓库数据state类型（2）登录接口返回的数据类型：src\api\user\type.ts登录请求可能返回成功/失败的数据，因此类型需要dataType需要包括成功的数据token和失败的数据message，且是可选的，要加上"?token?
Vue基础6天实施笔记
weixin_44867717的博客
02-09 1962
Vue 基础课程 课程介绍 Vue基础语法 指令、过滤器、按键修饰符、生命周期、自定义指令、computed计算属性、watch监听器 axios、ES6模块化、组件、vue单文件组件、WebStorage SPA单页应用、router路由、Promise VueCLI脚手架、element-ui组件库、eslint代码规范检测等等 vue介绍 三大前端框架 Vue Vue.js (view)是一...
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip
06-06
Vue微商城项目源码分析与搭建指南 Vue.js是一个轻量级、高性能的前端JavaScript框架，它具有组件化、响应式、易于上手的特点。在本项目中，我们使用Vue.js构建了一个微商城应用，结合Node.js作为后端服务器，为用户...
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)
weixin_34220963的博客
06-28 5905
地狱空荡荡，师兄在土创。虽然土，但是可以疗伤。 前言 vue项目实现动态路由的方式大体可分为两种:1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)详情可参阅花裤衩大佬的项目手把手...,我当时看这个项目看了好久才明白一点逻辑，因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼...
vue中配置路由
Jenny_ttw的博客
05-04 400
vue开发中配置路由，如果只有一级的写法： { path: '/answer', component: Layout, redirect: 'noredirect', children: [ { path: 'index', component: _import('gzjp/answer/index'), name: 'answer', meta: { ti...
vue基础之keep-alvie保持历史页面数据不变，切换页面后数据不变keep-alvie
tangdou369098655的博客
05-10 921
1：路由配置文件设置 { path: '/MenuM', component: Layout, redirect: '/MenuM', children: [ { path: 'MenuM', name: 'MenuM', component: () => import('@/views/MenuM'), meta: { title: '主界面', icon:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

纵有千堆雪与长街

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值