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参数的布尔值。
扫描二维码关注公众号,回复:
14972006 查看本文章
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