Vue项目的一些细节

1.动态获取图片

如果一个图片想要for循环动态使用，在webpack环境中可以使用

<img :src="require(item.image)">

但是如果是在vite环境

2.改变数值

 要加上一个.value才可以修改值

currentIndex.value = index

3.使用代码切换路由

import { useRouter } from "vue-router"
  const router = useRouter()
  function itemClick(index, item){
    currentIndex.value = index
    router.push(item.path)
  }

4.修改UI框架的默认样式

去掉scoped，但是大部分情况下是不可能这么做的。

给子组件的类套上一层:deep()

:deep(.van-tar-item){
    font-size:12px;
}

5.获取到活跃的路由对象

import { useRoute } from "vue-router"

const route = useRoute()

 在router中可以加入额外的参数meta

{
      path:"/city",
      component: () => import("@/views/city/city.vue"),
      meta: {
        attribute: true
      }
    }

获取到活跃的路由可以拿里面的参数。

6.切换路由时隐藏样式

1.如果App.vue中有一些全局的样式（比如tabbar），但是在一些子组件里面不想要用这些样式，可以在子组件的路由写meta参数，v-if判断meta参数的布尔值。

2.也可以给子组件设置一个css样式

.city {
    position: relative;
    z-index: 9;
    height: 100vh;
    background-color: #fff;
    overflow-y: auto;
}

7.css中固定一部分内容在顶部，内容可滚动

 给下面的内容加上css样式。

.content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }

8.获取路由传递的参数

 

 

9.隐藏滚动条

&::-webkit-scrollbar {
    display: none;
  }

10.下拉刷新功能

获取到数据需要push，而不是=

下拉刷新的时候需要加载新的内容，所以params的参数page需要改变，可以传入currentPage的值，通过改变currentPage的值来更改内容。 

store中也可以定义一个currentPage 

 

监听滚动到底部

 

11.根据id切换页面

先设置router的值 

12.从详情页返回

需要引入一个router，而不是route