-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Expose child routes on currentRoute object; add property for a CSS class on inactive routes #1650
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import Vue from 'vue' | ||
import VueRouter from 'vue-router' | ||
|
||
Vue.use(VueRouter) | ||
|
||
const Home = { template: '<div><h2>Home</h2></div>' } | ||
const About = { template: '<div><h2>About</h2></div>' } | ||
const Others = { template: '<div><h2>Others</h2></div>' } | ||
|
||
const Users = { | ||
template: ` | ||
<div> | ||
<h2>Users</h2> | ||
<router-view></router-view> | ||
</div> | ||
` | ||
} | ||
|
||
const User = { template: '<div>{{ $route.params.username }}</div>' } | ||
|
||
const router = new VueRouter({ | ||
mode: 'history', | ||
base: __dirname, | ||
routes: [ | ||
{ path: '/', component: Home }, | ||
{ path: '/about', component: About }, | ||
{ path: '/others', component: Others }, | ||
{ path: '/users', component: Users, | ||
children: [ | ||
{ path: ':username', name: 'user', component: User } | ||
] | ||
} | ||
] | ||
}) | ||
|
||
new Vue({ | ||
router, | ||
template: ` | ||
<div id="app"> | ||
<h1>Active Links</h1> | ||
<ul> | ||
<li><router-link to="/">/</router-link></li> | ||
<li><router-link to="/" exact>/ (exact match)</router-link></li> | ||
|
||
<li><router-link to="/users">/users</router-link></li> | ||
<li><router-link to="/users" exact>/users (exact match)</router-link></li> | ||
|
||
<li><router-link to="/users/evan">/users/evan</router-link></li> | ||
<li><router-link to="/users/evan#foo">/users/evan#foo</router-link></li> | ||
<li> | ||
<router-link :to="{ path: '/users/evan', query: { foo: 'bar' }}"> | ||
/users/evan?foo=bar | ||
</router-link> | ||
</li> | ||
<li><!-- #635 --> | ||
<router-link :to="{ name: 'user', params: { username: 'evan' }, query: { foo: 'bar' }}" exact> | ||
/users/evan?foo=bar (named view + exact match) | ||
</router-link> | ||
</li> | ||
<li> | ||
<router-link :to="{ path: '/users/evan', query: { foo: 'bar', baz: 'qux' }}"> | ||
/users/evan?foo=bar&baz=qux | ||
</router-link> | ||
</li> | ||
|
||
<li><router-link to="/about">/about</router-link></li> | ||
|
||
<router-link tag="li" to="/about"> | ||
<a>/about (active class on outer element)</a> | ||
</router-link> | ||
|
||
<li><router-link to="/others" active-class="custom-active" exact-active-class="custom-exact-active" inactive-class="custom-inactive" exact-inactive-class="custom-exact-inactive">/others</router-link></li> | ||
|
||
<router-link tag="li" to="/others" active-class="custom-active" exact-active-class="custom-exact-active" inactive-class="custom-inactive" exact-inactive-class="custom-exact-inactive"> | ||
<a>/others (active class on outer element)</a> | ||
</router-link> | ||
|
||
</ul> | ||
<router-view class="view"></router-view> | ||
</div> | ||
` | ||
}).$mount('#app') |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<!DOCTYPE html> | ||
<link rel="stylesheet" href="/global.css"> | ||
<style> | ||
a.router-link-active, li.router-link-active a { | ||
color: #f66; | ||
} | ||
a.router-link-exact-active, li.router-link-exact-active a { | ||
border-bottom: 1px solid #f66; | ||
} | ||
a.router-link-inactive, li.router-link-inactive a { | ||
color: #f6f; | ||
} | ||
a.router-link-exact-inactive, li.router-link-exact-inactive a { | ||
border-bottom: 1px solid #f6f; | ||
} | ||
|
||
a.custom-active, li.custom-active a { | ||
color: #66f; | ||
} | ||
a.custom-exact-active, li.custom-exact-active a { | ||
border-bottom: 1px solid #66f; | ||
} | ||
a.custom-inactive, li.custom-inactive a { | ||
color: #6f6; | ||
} | ||
a.custom-exact-inactive, li.custom-exact-inactive a { | ||
border-bottom: 1px solid #6f6; | ||
} | ||
|
||
</style> | ||
<a href="/">← Examples index</a> | ||
<div id="app"></div> | ||
<script src="/__build__/shared.js"></script> | ||
<script src="/__build__/inactive-links.js"></script> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -33,7 +33,10 @@ module.exports = { | |
'desiredCapabilities': { | ||
'browserName': 'chrome', | ||
'javascriptEnabled': true, | ||
'acceptSslCerts': true | ||
'acceptSslCerts': true, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you remove this as well please |
||
"chromeOptions": { | ||
"args" : ["--no-sandbox"] | ||
} | ||
} | ||
}, | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
|
||
module.exports = { | ||
'inactive links': function (browser) { | ||
browser | ||
.url('http://localhost:8080/inactive-links/') | ||
.waitForElementVisible('#app', 1000) | ||
.assert.count('li a', 13) | ||
// assert correct href with base | ||
.assert.attributeContains('li:nth-child(1) a', 'href', '/inactive-links/') | ||
.assert.attributeContains('li:nth-child(2) a', 'href', '/inactive-links/') | ||
.assert.attributeContains('li:nth-child(3) a', 'href', '/inactive-links/users') | ||
.assert.attributeContains('li:nth-child(4) a', 'href', '/inactive-links/users') | ||
.assert.attributeContains('li:nth-child(5) a', 'href', '/inactive-links/users/evan') | ||
.assert.attributeContains('li:nth-child(6) a', 'href', '/inactive-links/users/evan#foo') | ||
.assert.attributeContains('li:nth-child(7) a', 'href', '/inactive-links/users/evan?foo=bar') | ||
.assert.attributeContains('li:nth-child(8) a', 'href', '/inactive-links/users/evan?foo=bar') | ||
.assert.attributeContains('li:nth-child(9) a', 'href', '/inactive-links/users/evan?foo=bar&baz=qux') | ||
.assert.attributeContains('li:nth-child(10) a', 'href', '/inactive-links/about') | ||
.assert.attributeContains('li:nth-child(11) a', 'href', '/inactive-links/about') | ||
.assert.attributeContains('li:nth-child(12) a', 'href', '/inactive-links/others') | ||
.assert.attributeContains('li:nth-child(13) a', 'href', '/inactive-links/others') | ||
.assert.containsText('.view', 'Home') | ||
|
||
assertCustomActiveLinks(12, [12], [13], [12], [13]) | ||
assertCustomInactiveLinks(10, [12], [13], [12], [13]) | ||
|
||
browser.end() | ||
|
||
function assertCustomActiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) { | ||
browser.click(`li:nth-child(${n}) a`) | ||
activeA.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'custom-active') | ||
}) | ||
activeLI && activeLI.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i})`, 'custom-active') | ||
}) | ||
exactActiveA.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'custom-exact-active') | ||
.assert.cssClassPresent(`li:nth-child(${i}) a`, 'custom-active') | ||
}) | ||
exactActiveLI && exactActiveLI.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i})`, 'custom-exact-active') | ||
.assert.cssClassPresent(`li:nth-child(${i})`, 'custom-active') | ||
}) | ||
} | ||
function assertCustomInactiveLinks (n, activeA, activeLI, exactActiveA, exactActiveLI) { | ||
browser.click(`li:nth-child(${n}) a`) | ||
activeA.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'custom-inactive') | ||
}) | ||
activeLI && activeLI.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i})`, 'custom-inactive') | ||
}) | ||
exactActiveA.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i}) a`, 'custom-exact-inactive') | ||
.assert.cssClassPresent(`li:nth-child(${i}) a`, 'custom-inactive') | ||
}) | ||
exactActiveLI && exactActiveLI.forEach(i => { | ||
browser.assert.cssClassPresent(`li:nth-child(${i})`, 'custom-exact-inactive') | ||
.assert.cssClassPresent(`li:nth-child(${i})`, 'custom-inactive') | ||
}) | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import Vue from 'vue' | ||
import VueRouter from '../../../src/index' | ||
|
||
Vue.use(VueRouter) | ||
|
||
describe('currentRoute', () => { | ||
describe('children[]', () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think a describe is necessary here. a test with should have children and another with should have parent.children is enough |
||
it('should work', () => { | ||
const router = new VueRouter({ | ||
routes: | ||
[ | ||
{ | ||
path: '/jobs', | ||
}, | ||
{ | ||
path: '/setup', | ||
children: | ||
[ | ||
{ | ||
path: 'lists', | ||
}, | ||
{ | ||
path: 'periods', | ||
} | ||
] | ||
} | ||
] | ||
}) | ||
|
||
router.push('/setup') | ||
|
||
expect(router.currentRoute.fullPath).toEqual('/setup') | ||
expect(router.currentRoute.children.length).toEqual(2) | ||
expect(router.currentRoute.children[0].path).toEqual('lists') | ||
expect(router.currentRoute.children[1].path).toEqual('periods') | ||
expect(router.currentRoute.children[1].fullPath).toEqual(undefined) | ||
}) | ||
}) | ||
|
||
describe('parent', () => { | ||
it('should work', () => { | ||
const router = new VueRouter({ | ||
routes: | ||
[ | ||
{ | ||
path: '/jobs', | ||
}, | ||
{ | ||
path: '/setup', | ||
children: | ||
[ | ||
{ | ||
path: '/', | ||
redirect: 'lists' | ||
}, | ||
{ | ||
path: 'lists', | ||
}, | ||
{ | ||
path: 'periods', | ||
} | ||
] | ||
} | ||
] | ||
}) | ||
|
||
router.push('/setup/lists') | ||
|
||
expect(router.currentRoute.fullPath).toEqual('/setup/lists') | ||
expect(router.currentRoute.children.length).toEqual(0) | ||
expect(router.currentRoute.parent.children.length).toEqual(3) | ||
expect(router.currentRoute.parent.children[0].path).toEqual('/') | ||
expect(router.currentRoute.parent.children[2].path).toEqual('periods') | ||
expect(router.currentRoute.parent.children[2].fullPath).toEqual(undefined) | ||
expect(router.currentRoute.parent.fullPath).toEqual(undefined) | ||
}) | ||
}) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please let it as it was