Main容器使用Router动态渲染

最新推荐文章于 2024-02-02 04:03:08 发布
最新推荐文章于 2024-02-02 04:03:08 发布
阅读量237 收藏
点赞数 1
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51029697/article/details/124417196
版权
本文介绍了如何在项目中通过order.vue、orderMain.vue组件和router.ts配置，实现Main容器内容的动态路由渲染，以此达到页面动态加载的效果。
摘要由CSDN通过智能技术生成

一、order.vue

​
<template>
    <div>
<!-- 布局容器 -->
  <div class="common-layout">
      <!-- 容器头部 -->
    <el-container>
      <el-header>
          <!-- 头部中的位置 -->
          <el-row :gutter="20">
    <el-col :span="4"><div class="header-pic-size"><img src="../assets/logo.png" alt="图标"></div></el-col>
    <el-col :span="16"><h1 class="header-text-size">后台管理中心</h1></el-col>
    <el-col :span="4"><span class="header-name-size">Tina</span></el-col>
  </el-row>
      </el-header>
      <el-container>
          <!-- 容器侧面 -->
        <el-aside width="200px">
            <!-- 侧面容器导航栏 -->
            <el-col :span="12">
      <h5 class="mb-2">Custo
最低0.47元/天 解锁文章
「已注销」
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
main函数加router
weixin_42147560的博客
11-26 544
main函数加router路由器 1 main函数 import 'package:fluro/fluro.dart'; import 'package:flutter/material.dart'; import 'package:jaguar_flutter_asset/jaguar_flutter_asset.dart'; import 'package:nw_guangzhou_bhapp...
Vue路由动态渲染和动态传参
Qiuxuntao的博客
12-21 1482
一、动态渲染多个路由 // router/routerjs { path: '/movie/1', component: Movie}, //app组件 <router-link to="/movie/1">洛基</router-link> <router-link to="/movie/2">雷神</router-link> <router-link to="/movie/3">复联</router-link&g
动态路由渲染
weixin_56806279的博客
04-22 165
3.使用递归 传入接口获取到的用户对应的菜单数组 数据跟我们上方解析的数组进行对比，相同的就是用户需要进行渲染的路由，push到最终要渲染的数组中 进行返回，将这个数组进行遍历 一个一个addRoute到main下。1.首先加载默认所有的routes 通过require.context读取main下的所有ts文件。整体思路大致应该是：先在router中创建对应的映射文件，内容应该包含基本的路由配置信息。2.再通过keys方法，将路径拼接成完整路径 放入数组中。
动态路由渲染（思路）
m0_47298312的博客
09-09 808
在我们进行登录逻辑时会由于不同的身份信息，给定不同的身份权限（这个身份权限是确定的，权限信息一般存放于数据库）将用户信息提交给后端会得到返回结果叫做身份权限认定（一般是由后端完成，前端也是可以完成的），根据用户的权限进行数据的列表渲染叫做动态路由。
Vue3入门笔记----实现页面路由功能
panzhixiang
11-11 1519
Vue3路由实现，vue-router
Angularjs中UI Router的使用方法
10-22
Angularjs中UI Router的使用方法主要包括对UI Router模块的深入理解和使用。UI Router是AngularJS中用于页面路由的一种机制，它支持复杂的导航和视图的嵌套结构，这使得单页应用程序（SPA）的管理变得更为高效和清晰...
vue-router 使用与原理分析，测试结果来啦
dageliuqing的博客
11-17 4647
Vue Router 是Vue.js的官方路由。与Vue.js核心深度集成，让用Vue.js构建单页应用（SPA）变得更加简单。对于开发和维护管理后台类的前端项目，页面结构和组合可能非常复杂，所以正确的理解和使用Vue Router就显得尤为重要。
Router前端路由的使用
weixin_44441419的博客
01-13 1032
@[TOC]Vue 中路由 Router 的使用 什么是路由 后端路由： 对于普通的网站，所有的超链接都是 URL 地址，所有的 URL 地址都对应服务器上对应的资源； 前端路由：对于单页面应用程序来说，主要通过 URL 中的 hash（#号）来实现不同页面之间的切换，同时，hash 有一个特点：HTTP 请求中不会包含 hash 相关内容；所以，单页面应用程序中的页面跳转主要用 hash 实现...
vue-router 使用与原理分析
奇舞周刊
11-17 483
本文作者为奇舞团前端开发工程师简介Vue Router 是Vue.js的官方路由。与Vue.js核心深度集成，让用Vue.js构建单页应用（SPA）变得更加简单。对于开发和维护管理后台类的前端项目，页面结构和组合可能非常复杂，所以正确的理解和使用Vue Router就显得尤为重要。使用创建1、在安装好Vue Router依赖后，在App.vue中引入router-view，它是渲染的容器<d...
vue3-router集成，vuex4的集成
m0_68331234的博客
07-07 265
安装vue-router yarn add vue-router@4 | npm install vue-router@4;创建并配置路由 2.1 创建文件router/index.js 2.3 在index.js中创建并配置路由const mainRouter = createRouter({history:‘路由模式’,路由规则表}) 常见路由模式 createWebHashHistory() url带# ,createWebHistory（）url不带#，需要 服务器支持 2.4 导出路由 ex
ElementUI导航菜单通过路由实现页面跳转
kepler星球的博客
03-07 5300
1.index.vue <template> <div> <el-container> <!-- 左边导航栏 --> <el-aside width="250px"> <div class="main"> <aside class="aside"> <!--导航菜单--> &l...
vue+elementUI后台系统（第六章：路由嵌套与layout布局）
热门推荐
DW14687的博客
08-03 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 在后台系统设计中，经常会使用layout布局以及路由 一、layout布局 首先我们来看一下效果图： 1.引入库 代码如下（示例）： 二、使
【Vue篇】详解router路由 | element-ui组件 | 嵌套路由
小吉妙妙屋
12-27 2174
Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。Vue Router具有以下特点：声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。
Vue路由入门,用Vue路由来实现不同页面的渲染
weixin_44463218的博客
04-21 1593
Vue路由的配置，用路由功能实现不同页面的渲染
点击侧边栏菜单跳转到main 页面
最新发布
村长在路上
02-02 888
因此需要判断 获取路由路径 如果是/home 路径 则显示欢迎语(Devops管理系统) 如果不是则是路由占位符。前端依赖的后端接口字段 path, component。router.ts 中定义两个 子菜单 加载这两个页面。需要在 <el-main>标签下增加第一个路由占位符。因为登录的欢迎页面 和点击下的子菜单 会在同一个页面。.home.vue页面。home.vue 中。
关于el-main里的router-view跳转显示的一些逻辑
weixin_54682264的博客
05-18 774
关于el-main里的router-view跳转显示的图解~
router--main.js
wenmin1987的博客
08-08 797
--main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' imp...
基于Vue的后台导航的动态加载
weixin_43821151的博客
03-19 248
如下图 根据路由的信息自动生成导航 前提 使用vue的手脚架创建项目。 安装了ElementUI 项目目录： 其中因为 代码详情： App.vue <template> <div id="app"> <router-view></router-view> </div> </template> index.vue <template> <div> <el-contai
vue工程配置了router路由但是不起作用
09-05
可以通过在命令行中运行`npm install vue-router`来安装Vue Router，并在项目的入口文件（如main.js）中使用`import VueRouter from 'vue-router'`导入。 2. 未在Vue实例中注册Vue Router：确保在Vue实例中注册了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值