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>
相关文章
|
1天前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
72 3
|
1天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
19 0
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
|
1天前
|
移动开发 小程序 Android开发
基于jeecgboot的flowable为uniapp适配的流程页面调整
基于jeecgboot的flowable为uniapp适配的流程页面调整
|
1天前
|
JavaScript
vue项目切换页面白屏的解决方案
vue项目切换页面白屏的解决方案
8 0
|
1天前
|
监控 JavaScript 前端开发
vue切换页面白屏问题怎么解决
vue切换页面白屏问题怎么解决
19 0
|
1天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
15 2
|
1天前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
16 1
|
1天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
34 3
|
1天前
|
JavaScript 前端开发
vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程
这是一个Vue.js组件代码示例,展示了带有侧边栏导航和面包屑导航的布局。模板中使用Element Plus组件库,包含可折叠的侧边栏,其中左侧有 Logo 和导航列表,右侧显示更具体的子菜单。`asideDisplay`控制侧边栏宽度。在`script`部分,使用Vue的响应式数据和生命周期钩子初始化路由相关数据,并从localStorage恢复状态。样式部分定义了组件的颜色、尺寸和布局。
19 1