B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

Vue3 路由监听watch 和 computed

Published on:2022-05-09

格式,demo需要是ref/reactive响应式类型的


watch(demo, () => {})
watch(() => demo.name, () => {})


监听路由方式


1.router


import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
//监听路由变化
watch(router.currentRoute, (newRouter, oldRouter) => {
    console.log(newRouter.path)
})


2.route


import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
//console.log(route)
// {path: ComputedRefImpl, name: ComputedRefImpl, params: ComputedRefImpl, query: ComputedRefImpl}
//可以监听 route.path,route.params route.query等等,方式如下
watch(
    () => route.params,
    (newPath, oldPath) => {
        console.log(newPath)
    },
    {
        immediate: true, //是否首次进行监听,默认false
        deep: true //是否开启深度监听
    }
)



computed

const test = ref(1)

const newTest = computed(() => {
    return test.value + 10
})
//直接箭头函数,等价于下面
const newTest2 = computed({
    get() {
        return test.value + 10
    }
})
//设置 newTest2.value =xxx 不会修改test的值

//还可以设置set
const newTest3 = computed({
    get() {
        return test.value + 10
    },
    set(value) {
        //自己根据需要处理
        test.value = value - 10
    }
})

//直接计算 store的值
const store = useStore()
const menList = computed(() => store.state.menuList)



留言列表(0)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    奥德赛 on Electron+vue搭建项目或将vue项目转为electron :大声道奥术大师大声道
    cmf :我的qq 292864861
    cmf :你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
    laravel新手 :您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类