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>
目录
打赏
0
0
0
0
2
分享
相关文章
|
6月前
|
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
258 2
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
230 18
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
114 0
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
144 8
|
5月前
|
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
91 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
85 5
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
210 5
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
97 1
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
50 1
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
185 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等