Vue常见问题解决方法

Vue酱

于 2021-03-26 09:12:31 发布

阅读量140

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/VueJiang/article/details/115226140

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了Vue中v-for渲染本地图片的问题，如何传递参数到详情页，以及禁止页面缩放的解决方案。同时，讲解了如何在Vue中实现换行文本的渲染。对于开发者来说，这些技巧对于提升移动端应用的用户体验至关重要。

摘要由CSDN通过智能技术生成

1. v-for渲染本地图片时加载不出来

数组里面图片的路径要写成如下：

image:require('../images/login.png')

渲染时:

<img :src="item.image" />

2. 跳转详情页,页面传参

1.配置路由 :router.js文件

import DetailsPagefrom './pages/detailsPage'  //引入组件
const routers = [
  {
    path:'/details', //路径
    name:'details',
    component: DetailsPage, //页面组件
    meta: {
      title: '产品详情页'
    }
  },
]

2.列表页面

<template>
   <button  @click="toDetail(1)">进入详情页</button>
</template>

//js
methods:{
 toDetail(id) {
      this.$router.push({
        path: '/details', //要跳转的路径
        query: {
          id: id  //要传过去的数据
        }
      })
    }
}

3.详情页接收数据

  created() {
    this.pageId=this.$route.query.id  //接收传过来的id,如果有多条可以到query
  },

vue移动端h5 禁止页面放大

//安卓 index.html 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

//没有index.html文件的情况下,可以操控原生dom,实现安卓的效果
export default {
  mounted() {
    const metaEl = document.createElement('meta');
    metaEl.name = "viewport";
    metaEl.content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0";
    document.head.appendChild(metaEl);
  }
}


//App.vue 
//ios:  script标签内写这段代码

window.onload = function() {
  document.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  })
  document.addEventListener('gesturestart', function(event) {
    event.preventDefault()
  })
}