uniapp一个Vue页面引入另一个Vue页面

简介: uniapp一个Vue页面引入另一个Vue页面

1.首先在根目录中pages创建目录common,再创建您要引入的Vue页面,比如csdn.vue

2.在csdn.vue页面里您编写自己要开发的内容

根据自己的需求进行修改,我只是举例

<template>
  <view class="content" >
    <view class="biaoti">
      CSND
    </view>
  </view>
</template>
<script>
  export default {
    data() {
    return {
    pmkuandu: '',
    pmgaodu: '',  
    } 
    },
    onLoad() {
    },
    methods: {
    },
  }
</script>
<style>
.content{
background-color: darkcyan;
} 
.biaoti{
  color: #ff0000;
}
</style>

3.然后在index.vue页面进行引入

<template>
  <view class="content">
  </view>
  <view class="csdn">
    <csdn :style="{ height: pmgaodu + 'px', width: pmkuandu + 'px' }"></csdn>
  </view>
</template>
<script>
  import csdn from '/pages/common/csdn.vue'
  export default {
    components:{
      csdn
    },
    data() {
      return {
      }
    },
    onLoad() {
    },
    methods: {
    }
  }
</script>
<style>
  .content {
  z-index: 5;
  position: relative;
  }
  .csdn {
    display: flex;
    z-index: 3;
    position: fixed;
    top: 0px;
    margin-left: 0px;
  }
</style>
相关文章
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
665 2
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
1773 18
|
11月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
817 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
529 0
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
352 56
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
1811 9
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
312 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
370 5
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
569 5
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
288 1

热门文章

最新文章