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>
相关文章
|
2月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
144 2
|
1月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
50 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
1月前
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
24 5
|
1月前
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
69 5
|
28天前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
22 1
|
14天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
50 0
|
1月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
17 1
|
25天前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
313 0
|
1月前
|
JavaScript API
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】
37 0
|
1月前
|
JavaScript 前端开发
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
26 0