Skip to content

1102: $route returns consistent value across all Vue instances #1108

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jan 23, 2017
Merged

1102: $route returns consistent value across all Vue instances #1108

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb136b5
Issue:1102
jhartman86 Jan 20, 2017
5e6ab6d
avoid initializing the router more than once
yyx990803 Jan 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions examples/discrete-components/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components
const Home = { template: '<div>Component: home</div>' }
const Foo = { template: '<div>Component: foo</div>' }
const Bar = { template: '<div>Component: bar</div>' }

// 3. Create the router
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})

// 4. Create extended base Vue with router injected here (all
// children should inherit the same router).
const BaseVue = Vue.extend({ router })

// Discrete components means that a new Vue instance will be created
// and bound on multiple *independent* nodes (eg. one Vue instance
// per node); but the router should act as a singleton and keep all
// instances in sync.
document.querySelectorAll('.app').forEach((node) => {
new BaseVue({
el: node
})
})
41 changes: 41 additions & 0 deletions examples/discrete-components/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<link rel="stylesheet" href="/global.css">
<style>
.inliner {font-size:0;line-height:0;}
.app {font-size:1rem;line-height:1;display:inline-block;padding:1rem;width:33%;border-left:1px solid #f1f1f1;box-sizing:border-box;vertical-align:top;}
.snippet {display:inline-block;padding:5px;background:#f1f1f1;font-size:90%;}
.app.component-view {display:block;width:100%;text-align:center;}
</style>
<a href="/">&larr; Examples index</a>
<div class="inliner">
<div class="app">
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
</ul>
$route.path value: <span class="snippet">{{ $route.path }}</span>
</div>
<div class="app">
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
</ul>
$route.path value: <span class="snippet">{{ $route.path }}</span>
</div>
<div class="app">
<ul>
<li><router-link to="/">/</router-link></li>
<li><router-link to="/foo">/foo</router-link></li>
<li><router-link to="/bar">/bar</router-link></li>
</ul>
$route.path value: <span class="snippet">{{ $route.path }}</span>
</div>
</div>
<div class="app component-view">
<router-view class="view"></router-view>
$route.path value: <span class="snippet">{{ $route.path }}</span>
</div>
<script src="/__build__/shared.js"></script>
<script src="/__build__/discrete-components.js"></script>
1 change: 1 addition & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ <h1>Vue Router Examples</h1>
<li><a href="scroll-behavior">Scroll Behavior</a></li>
<li><a href="lazy-loading">Lazy Loading</a></li>
<li><a href="auth-flow">Auth Flow</a></li>
<li><a href="discrete-components">Discrete Components</a></li>
</ul>
</body>
</html>
9 changes: 8 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default class VueRouter {
static install: () => void;
static version: string;

apps: Array<?any>;
app: any;
options: RouterOptions;
mode: string;
Expand All @@ -26,6 +27,7 @@ export default class VueRouter {

constructor (options: RouterOptions = {}) {
this.app = null
this.apps = []
this.options = options
this.beforeHooks = []
this.afterHooks = []
Expand Down Expand Up @@ -69,6 +71,7 @@ export default class VueRouter {
`before creating root instance.`
)

this.apps.push(app)
this.app = app

const history = this.history
Expand All @@ -89,7 +92,11 @@ export default class VueRouter {
}

history.listen(route => {
this.app._route = route
this.apps.forEach((app) => {
if (app) {
Copy link
Member

@posva posva Jan 20, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A check shouldn't be necessary, should it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thats what I thought as well, but the syntax check wouldn't let it pass. Don't remember exactly, but it was along the lines of "Cannot set property on a possibly null value".

app._route = route
}
})
})
}

Expand Down
22 changes: 22 additions & 0 deletions test/unit/specs/discrete-components.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Vue from 'vue'
import VueRouter from '../../../src/index'

describe('[Vue Instance].$route bindings', () => {
describe('boundToSingleVueInstance', () => {
it('updates $route on all instances', () => {
const router = new VueRouter({
routes: [
{ path: '/', component: { name: 'foo' }},
{ path: '/bar', component: { name: 'bar' }}
]
})
const app1 = new Vue({ router })
const app2 = new Vue({ router })
expect(app1.$route.path).toBe('/')
expect(app2.$route.path).toBe('/')
router.push('/bar')
expect(app1.$route.path).toBe('/bar')
expect(app2.$route.path).toBe('/bar')
})
})
})