Loading... Vue3 vue-router刷新获取不到路由路径 今天修改写页面的时候发现一个Bug,底部导航栏默认是在首页,在其他页面进行刷新的时候,导航栏active又回回到首页,这样体验很不好 # 环境 ```json "vue-router": "^4.0.10", "vue": "^3.0.5", "vant": "^3.1.5", ``` ```html <!-- template --> <router-view /> <van-tabbar v-model="navActive" active-color="#e43130" inactive-color="#000" > <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item> <van-tabbar-item to="/category" icon="search">分类</van-tabbar-item> <van-tabbar-item to="/cart" icon="friends-o">购物车</van-tabbar-item> <van-tabbar-item to="/mine" icon="setting-o">我的</van-tabbar-item> </van-tabbar> ``` # 代码 ```js // <script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'App', setup: () => { const navActive = ref<number>(0) return { navActive } } }) ``` 代码很简单,就只是一个Vant组件,对应着4个页面,首次默认`active`是0,下面我们写我们想要的效果 ```js import { useRouter } from 'vue-router' const router = useRouter() // getRouters() 获取注册的router列表 // currentRoute.value.path 当前页面的path router.getRoutes().map((item, index) => { if(item.path === router.currentRoute.value.path){ navActive.value = index } }) ``` 这段代码理论上可以实现我们的需求,但是实际上并不能,刷新首次加载获取到的是`/`,但是期望值是`/category` 实现方式有很多种,`setTimeOut()`等页面渲染完成,再执行代码,但更推荐使用`watch`或者vue3新出的`watchEffect` ```js // 添加<script lang="ts"> // watch方法,此方法和vue2的watch完全等效 import { watch } from 'vue' watch( () => router.currentRoute.value.path, (path, oldPath) => { router.getRoutes().map((item, index) => { if (path === item.path) { navActive.value = index } }) }, { deep: false, // 是否采用深度监听 immediate: false // 首次加载是否执行 } ) ``` ```js // 添加<script lang="ts"> // watchEffect方法,Vue3新增方法,自动收集依赖 // 每次首次都会自动执行,相当于 immediate: true import { watchEffect } from 'vue' watchEffect(() => { router.getRoutes().map((item, index) => { if(item.path === router.currentRoute.value.path){ navActive.value = index } }) }) ``` 这样我们想要的功能就实现了 最后修改:2022 年 09 月 15 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用,请随意赞赏