当vue路由变化时，改变导航栏的样式⽅法当我们需要做⼀个类似顶部或底部导航栏公共组件的时候，单击某个导航栏按钮，跳转到另⼀个组件，
并且改变导航栏按钮的样式，如果⽤<router-link to=""><router-link/> 跳转的时候，我们可以这样做，
改变router-link-active 的样式，它是路由path指向当前组件时系统⾃动⽣成的。
先看下效果：
贴上我的路由⽂件js
export default new Router({
routes: [
{
path: '/',
component: App,
children:[
// ⼆级路由
{
path:'',
component:common_nav,
children:[
{
path:'/html',
component:html
},
{
path:'/js',
component:js
},
{
path:'/css',
component:css
},
{
path:'/img',
component:img
}
]
}
]
}
]
js导航栏下拉菜单
})
拓展知识：解决vue在路由过程中，改变导航栏的单个点击样式的问题
当我们做⼀个公共底部组件，类似于tab选项卡或者导航栏，单击路由到另外⼀个组件上的时候，我们改变当前路由的样式问题，并且返回，样式不会初始化，因为他是由路由决定的
如果导航栏全部都是由router-link包含跳转的话，有⼀个⾮常好的⽅法
router-link-active
—-.router-link-active这个class，是当路由path指向当前组件时⾃动⽣成的，可以在此处设置样式（选中状态）
以上这篇当vue路由变化时，改变导航栏的样式⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。