Comments (14)
For ease of use: the active link will automatically get .v-link-active
. This class name can be configured as an option when creating the router as linkActiveClass
.
from vue-router.
@amirrustam FYI in 2.0 there's exact
matching mode: http://router.vuejs.org/en/api/router-link.html
from vue-router.
Ah, actually, we can just add an additional auto class: .v-link-child-active
...
Or, maybe a partial match should be the default, where exact match adds the class .v-link-active-exact
from vue-router.
I was doing like v-class="active: route.path=='/page'"
:) but helper would make it elegant probably. Also, something like route.componentName
would be useful, i find myself doing route.path.split('/')[n]
many times to find out which sub-route is currently active. What do you think?
from vue-router.
from vue-router.
Oh yeah, now that's really Evan. 👍
from vue-router.
Would it make sense to have an option to also have the class present of a child route is active?
For example, if I have a 'users' link in my nav, I might want that to also be highlighted when I'm on 'users/:id' or 'users/create'.
from vue-router.
@JosephSilber I'll think about that, but it would introduce additional api surface to configure this behavior. In those cases it's probably better to do something csutom like v-class="active: /^user/.test(route.path)"
, or even a custom directive.
from vue-router.
Have you any idea why the classes do not apply on the app first init ?
Then when I navigate it updates itself!
from vue-router.
@manudurgoni not sure, it seems to be working correctly in the example (on initial load with a matched url).
from vue-router.
@yyx990803 You've right :)
On initial load, my route path is : fr/categorie/slug
, so it doesn't match with the destination who is : /fr/categorie/slug
. And when I navigate, all is good. I just need to find why the first slash is removed on init.
EDIT : ok I fixed my code :)
from vue-router.
@yyx990803 Any plans to include something like the .v-link-active-exact
you proposed earlier?
from vue-router.
@fnlctrl 🙏 Thank you. I read right passed that when reading the docs.
from vue-router.
As 2.5.0+, Now just :
<router-link to="/" exact-active-class="is-active">Home</router-link>
Thanks @fnlctrl
from vue-router.
Related Issues (20)
- Vue 2.7 useRouter & Storybook HOT 1
- In navigation guards, it is possible to distinguish whether push triggers navigation or replace triggers navigation?
- 后面异步append加入的script没有插入iframe的head HOT 1
- vue-router is very nice HOT 1
- npm 和yarn 安装vue-router,useRoute 数据不一致 HOT 1
- 在微前端qiankun为基座的情况下,手动修改浏览器地址栏,两个子应用间设置的createWebHashHistory base会互相叠加 HOT 3
- Use dynamic routing prompts Uncaught Error: [vue-router] "path" is required in a route configuration HOT 1
- requested module '/node_modules/.vite/deps/vue-router.js?v=85d94ed7' does not provide an export named 'default' HOT 1
- Illegal character leads to lost all query data in "history" mode
- The history.state object lost certain properties because they were overwritten by the pushState function. HOT 1
- 两层iframe嵌套,在hash模式下,第二层iframe不渲染 HOT 2
- Page refreshing after replacing the current route ( Component getting unmounted and mounted again) HOT 2
- watch router or router.currentRoute.path question HOT 2
- Canonical Path for SEO tagging? HOT 7
- 4.1.5版本以上,单个路由配置beforeEnter 无效 HOT 1
- Detect when the user changes the URL on the address bar by manually typing it HOT 1
- check path 404 HOT 1
- In Vue vite, router.push() does not render page although it does navigate to a new URL HOT 1
- The type of query is wrong and may be undefined. HOT 1
- Misfiled issue. Ignore/delete HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-router.