exact属性をrouter-linkに付与すると以下のようになり、URLパスに厳密に(完全に)一致している時のみactive-classで定義しているクラスが要素に付与されるようにできる。 動画のソースコードは以下。 App.vue <template><div><navclass="navbar navbar-expand-lg navbar-light bg-light"><divclass="...
So I ask for adding a <router-link> attr/directive(or using name match instead of path match) to improve this situation. Member posva commented Aug 21, 2017 Usually, you have some kind of prefix for that kind of routes: /items/:id, and in that case, you won't need exact. I ha...
例如,可以创建一个名为active-link的样式类。 在HTML模板中的导航链接中,使用routerLinkActive指令来绑定要添加的样式类,并使用[routerLinkActiveOptions]属性来配置排除的路径。 示例代码: 代码语言:txt 复制 <a routerLink="/home" routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true }">...
to, exact}) {return(<Routepath={to}exact={exact}children={({match})=>(<liclassName={match?styles.activeRoute:null}><Linkto={to}>{children}</Link></li>)}/>)
@inca non-exact match only cares about equality of query keys (answer in this case) https://github.com/vuejs/vue-router/blob/next/src/util/route.js#L42-L43 So it'll be a breaking change.. Needs discussion @posva @LinusBorg @yyx990803 LinusBorg added the bug label Sep 2, 2016 ...
There are three ways to check an link is active or not and add active class for it: constisLinkActive = (match, location) =>{returnmatch };constNav = () =>(<nav> <NavLink to="/"exactactiveStyle={{color:'pink'}}>Home</NavLink> ...
There are three ways to check an link is active or not and add active class for it: constisLinkActive = (match, location) =>{returnmatch };constNav = () =>(<nav> <NavLink to="/"exactactiveStyle={{color:'pink'}}>Home</NavLink> ...
Hi Can I match partially and make one link active ? In below example profile link should be active when I go to any user. <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}"> <a [routerLink]="['/user',1]"> Profile</a> </li> Here on click I want...
it.todo('can be exact-active as an alias') it.todo('is active when a child is active')46 changes: 46 additions & 0 deletions 46 __tests__/router.spec.ts @@ -382,6 +382,52 @@ describe('Router', () => { }) }) it('can reroute to a replaced route with the same componen...
I was doing likev-class="active: route.path=='/page'":) but helper would make it elegant probably. Also, something likeroute.componentNamewould be useful, i find myself doingroute.path.split('/')[n]many times to find out which sub-route is currently active. What do you think?