动态路由给路由加随机函数 vue路由匹配

最新推荐文章于 2023-11-01 10:13:13 发布

原创最新推荐文章于 2023-11-01 10:13:13 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

28 篇文章

订阅专栏

本文探讨了在Vue中使用动态路由时遇到的问题，包括如何在模板中使用模板字符串及如何保持router-link的active-class在加入随机数后的URL中仍能正确匹配，实现按钮高亮。文章详细介绍了解决方案，并分享了beforeRouteUpdate路由守卫的使用技巧。

动态路由

当路由相同时，router-vue是不会在跳转路由的，所以，我在以动态路由的方式在url后加了随机数，但是有了随机数之后，即使相同的页面也不会有相同的url，所以router-link的acitve-class就不能够匹配到了。

这里有两个问题，一是怎么在vue模板上使用模板字符串，二是再如何匹配到正确的url，以便按钮高亮。

一，在vue模板上使用模板字符串

<router-link :to="`/home/mydoctor/zonghe/${Math.random()}`"> 
    综合 
</router-link>

二，如何匹配到正确的url，以便按钮高亮。

<router-link 
    :class="depart === 'zonghe' ? 'active' : '' "                     
    :to="`/home/mydoctor/zonghe/${Math.random()}`">
         综合 
</router-link> 


data:{ 
    depart : 'zonghe' 
} 

beforeRouteUpdate(to, from, next ){
     this.depart = to.params.depart
}

这里我才用了beforeRouteUpdate这个路由守卫来检测动态路由的变化，从而改变depart的值，因为depart的值与url相对应，从而可以精准控制高亮。